Variables y tipos en JavaScript: primeros pasos

HTML da estructura a una página, CSS controla su aspecto y JavaScript añade comportamiento. El motor de JavaScript de un navegador ejecuta las instrucciones de un script. A menos que una decisión cambie la ruta, esas instrucciones se ejecutan de arriba abajo.

Coloca código en la página o en un archivo independiente

Un script integrado en HTML contiene JavaScript entre las etiquetas de apertura y cierre:

<script>
  console.log("Hello from the page");
</script>

Un script externo guarda el JavaScript en un archivo .js independiente. Este HTML lo carga:

<script src="js/app.js"></script>

El archivo externo contiene console.log("Hello from the page"); sin etiquetas <script>. Separar los archivos mantiene el HTML legible, permite que varias páginas compartan código y que el navegador guarde el script en caché. Cuando src está presente, se ignora el código dentro del mismo elemento. Usa un solo método por elemento y escribe siempre la etiqueta de cierre </script>: un <script ... /> de cierre automático no cierra el elemento en HTML.

Elige cuándo se ejecuta el script

Un script clásico sin atributo de carga detiene el análisis sintáctico de HTML mientras el navegador lo carga y ejecuta. En <head>, se ejecuta antes de que se haya construido el contenido posterior del cuerpo. Colocarlo justo antes de </body> sitúa el contenido de la página antes que él.

Para un script clásico externo en <head>, defer es una opción predeterminada útil:

<script src="js/app.js" defer></script>

El navegador descarga el script mientras sigue analizando el HTML. Ejecuta el script cuando termina el análisis. Varios scripts diferidos se ejecutan en su orden en el HTML, por lo que un segundo script puede usar valores establecidos por el primero.

Usa async para código independiente que no dependa de que la página esté lista ni de otro script. Añadir defer a un script clásico integrado en HTML no tiene efecto.

Carga un módulo

<script type="module" src="js/main.js"></script>

Un módulo se difiere por defecto y se ejecuta en modo estricto. Puede compartir código mediante import y export. Para cargar módulos en Chrome o Firefox, sirve el proyecto con un servidor de desarrollo local, como la función de servidor en vivo de un editor. Abrir la página en una dirección file:// provoca restricciones en la carga de módulos.

Comprueba la conexión

Supón que index.html está junto a una carpeta js que contiene greet.js. Pon console.log("Page ready"); en ese script y <script src="js/greet.js" defer></script> en el head del HTML. Abre la página y luego su consola: el mensaje es «Page ready».

La ruta relativa comienza en la carpeta del archivo HTML. Con esta organización, src="greet.js" apunta al lugar equivocado. Un mensaje de archivo no encontrado significa que no hay ningún script que ejecutar en esa dirección. Si copiaste las etiquetas HTML en el archivo JavaScript, el motor indica un error de sintaxis en el marcado.

La consola del navegador muestra mensajes, errores y los resultados del código que escribes. Abre la consola de la página que estás probando. En Chrome o Edge, usa Ctrl+Shift+J en Windows/Linux o Cmd+Option+J en Mac. En Firefox, usa Ctrl+Shift+K o Cmd+Option+K. F12 abre las herramientas de desarrollo completas en Chrome y Edge.

Sentencias y expresiones

Una expresión produce un valor: 4 + 5 produce 9. Una sentencia da una instrucción, como almacenar ese valor o mostrarlo:

let total = 4 + 5;
console.log("Total:", total);

La primera línea se ejecuta antes que la segunda, que muestra «Total: 9». Un punto y coma termina una sentencia. JavaScript puede insertar muchos puntos y comas omitidos, pero los saltos de línea no siempre funcionan como separadores. Termina las sentencias con punto y coma para dejar clara la estructura deseada.

Escribe 2 + 3 en la consola y pulsa Enter para ver 5. Usa Shift+Enter para una línea nueva sin ejecutar lo escrito. Si introduces let x = 5;, la consola puede mostrar undefined como resultado de esa sentencia. Esto no significa que x contenga undefined: al introducir x a continuación se muestra 5. Del mismo modo, una llamada a console.log() muestra su mensaje y devuelve undefined.

Nombres y comentarios

JavaScript distingue entre mayúsculas y minúsculas. console.log("Hi"); funciona, pero Console.log("Hi"); se refiere a un nombre diferente y genera ReferenceError. console.Log("Hi"); encuentra console, pero falla con TypeError porque no existe un método Log al que se pueda llamar.

Los comentarios están dirigidos a quienes leen el código. El motor los omite:

// Keep the starting value for the next calculation.
let total = 4;
/* A comment can also
   continue on another line. */
console.log(total);

Poner // antes de una sentencia desactiva temporalmente esa línea. Un comentario útil explica una razón que el código por sí solo no aclara.

Mensajes, advertencias y experimentos

console.log("Total:", 9); muestra sus argumentos separados por espacios. console.warn() marca una advertencia; console.error() marca un mensaje de error. Mostrar un mensaje con console.error() no genera por sí mismo una excepción. console.clear() limpia la pantalla.

Las entradas de la consola son experimentos, no ediciones guardadas. Al recargar se vuelven a ejecutar los scripts guardados de la página. Puedes inspeccionar en la consola las variables de nivel superior de los scripts clásicos; las variables de nivel superior de un módulo permanecen dentro de ese módulo.

Cuadros de diálogo sencillos y modo estricto

alert("Saved!"); muestra un mensaje. confirm("Continue?") devuelve true para Aceptar y false para Cancelar. prompt("Quantity?", "1") devuelve la cadena de caracteres introducida, o null para Cancelar. Escribir 12 da "12", no 12. Estos cuadros de diálogo pausan la interacción mientras están abiertos.

Pon "use strict"; al inicio de un script clásico para que ciertos errores se notifiquen. Por ejemplo, totl = 5; sin declaración genera ReferenceError en modo estricto; en un script clásico sin modo estricto puede crear una variable global accidental. Un módulo ya usa el modo estricto. Comprueba la escritura y declara los nombres antes de asignarles valores.

Una variable es un nombre que hace referencia a un valor. Puedes declarar primero el nombre y asignar su valor después, o hacer ambas cosas en una sentencia. El operador de asignación = almacena el valor de la derecha en el nombre de la izquierda.

Elige let o const

let score;
console.log(score); // undefined
score = 10;
score = score + 2;
console.log(score); // 12

let score; declara la variable. Hasta que una asignación le dé otro valor, contiene undefined. La siguiente asignación almacena 10. En score = score + 2;, JavaScript lee la puntuación anterior, suma 2 y después almacena 12. Esta es una instrucción de actualización, por lo que no tiene por qué tener sentido como ecuación matemática. La reasignación usa el nombre existente sin volver a escribir let.

Una declaración const debe incluir su valor inicial:

const BOILING_POINT_C = 100;

La declaración const rate; es un error de sintaxis porque carece de un inicializador. Intentar asignar un valor nuevo a BOILING_POINT_C más adelante genera un TypeError.

Usa const por defecto. Elige let para un total acumulado, un contador o un resultado que asignarán sentencias posteriores. Un valor calculado a partir de otros valores también puede usar const si el programa nunca reasigna ese nombre.

Da al nombre un significado claro

Los nombres pueden contener letras, dígitos, _ y $; no pueden empezar por un dígito. place1 es válido, pero 1stPlace no lo es. Los espacios están prohibidos y un guion se interpreta como una resta, por lo que total-price no nombra una sola variable. Las palabras reservadas como if, return y class no pueden ser nombres de variables.

Usa la notación camelCase para nombres comunes: itemCount, firstName o priceWithTax. Los nombres booleanos como isLoggedIn y hasDiscount describen un valor de sí o no. Incluye unidades cuando eviten confusiones: distanceKm y durationMin. Los valores fijos conocidos antes de ejecutar el programa suelen usar UPPER_SNAKE_CASE, como MAX_LOGIN_ATTEMPTS. Las mayúsculas y minúsculas importan: total y Total son nombres distintos.

Sigue un total acumulado

const TAX_RATE = 0.2;
let total = 0;
total = total + 12.5;
total = total + 7.5;
const totalWithTax = total * (1 + TAX_RATE);
console.log(totalWithTax); // 24

El total comienza en 0, pasa a 12.5 y después a 20. El multiplicador 1 + TAX_RATE es 1.2, por lo que el importe final es 24. Solo total necesita reasignarse. La tasa del impuesto y el importe final calculado usan const.

Si escribes let total = 7.5; una segunda vez en el mismo ámbito, estás intentando declarar una segunda variable, no actualizar la primera. Usa total = 7.5; para sustituir el valor.

Reconoce declaraciones antiguas

El código antiguo suele usar var. Sigue funcionando, pero sus variables pertenecen a una función o un script en vez de a un bloque anidado ordinario. Permite declaraciones repetidas y las lecturas antes de la declaración producen undefined. Los modernos let y const detectan estos errores. Ten presentes sus reglas cuando leas un tutorial antiguo que use var.

Un bloque es el código entre llaves, como el cuerpo de un if. El ámbito de una variable es la región donde su nombre se refiere a esa variable. Tanto let como const tienen ámbito de bloque, incluidos los bloques anidados dentro del bloque en que se declaran.

Mantén un resultado donde se necesite

const temperatureC = 31;
let label;
if (temperatureC > 30) {
  label = "hot";
} else {
  label = "mild";
}
console.log(label); // hot

label se declara fuera de las ramas, por lo que la última línea puede leerla. Cada rama asigna un valor a la variable existente. Si en su lugar declaras const label = "hot"; dentro de la primera rama, esa variable no se puede leer después del bloque. Si no hay otra label en el ámbito, la lectura final genera ReferenceError.

Una declaración de nivel superior en un script clásico tiene ámbito global: pueden usarla el código posterior de ese script y los demás scripts clásicos de la página. En un módulo, las variables de nivel superior pertenecen a ese módulo. Mantén una variable en el ámbito más pequeño que la necesite para reducir los conflictos de nombres.

Distingue el sombreado de variables de la reasignación

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

La declaración interna crea una variable independiente. Esto es sombreado de variables: dentro del bloque interno, x se refiere a la variable interna. La variable externa sigue siendo 1. En cambio, eliminar el let interno asignaría 2 a la variable externa. Los nombres distintos hacen que esta diferencia sea más fácil de leer.

Lee antes de la inicialización

Un enlace con ámbito de bloque abarca todo su bloque, pero no se puede acceder a él antes de que la declaración lo inicialice. La región anterior a la inicialización es la zona muerta temporal:

console.log(price);
let price = 5;

Esto genera ReferenceError: Cannot access 'price' before initialization. El nombre existe en el ámbito, pero no está listo. En comparación, price is not defined significa que no se encuentra allí ningún enlace con ese nombre. Una declaración interna también sombrea un nombre externo antes de la línea de declaración interna; el valor externo no puede eludir la zona muerta temporal de la variable interna.

Relaciona cada error con una solución

Los errores de sintaxis impiden que ese script comience. Un error en tiempo de ejecución detiene la ejecución actual cuando llega a la sentencia que falla. Chrome permite otra declaración let en una entrada de consola independiente por comodidad; esto no hace que las declaraciones duplicadas sean válidas en un script.

Const fija la referencia

Los valores primitivos como los números y las cadenas de caracteres no pueden cambiar directamente. El contenido de un objeto puede cambiar incluso cuando su nombre usa const:

const settings = { theme: "dark" };
settings.theme = "light"; // allowed

El nombre sigue haciendo referencia al mismo objeto. Asignar settings = {}; intenta sustituir esa referencia y genera TypeError.

Los valores 7, "7" y true tienen tipos diferentes. Pueden aparecer en lugares similares de una página, pero JavaScript aplica reglas distintas a cada uno. Un tipo describe el valor que contiene actualmente una variable, no una restricción permanente de esta.

Empieza por los tres tipos principales

Un número representa valores numéricos enteros y decimales: 42, -7 y 3.75 tienen el mismo tipo. La notación científica también es numérica: 1e3 significa 1000. Una cadena de caracteres contiene texto entre comillas, por lo que "42" es texto aunque sus caracteres sean dígitos. Un booleano es exactamente true o false, sin comillas. Las comparaciones producen booleanos que un programa puede usar para tomar decisiones.

Usa typeof para inspeccionar un valor. Devuelve una cadena de caracteres que indica el tipo:

console.log(typeof 7);         // number
console.log(typeof "7");       // string
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined

Los comentarios muestran las palabras que se imprimen; los resultados en sí son cadenas de caracteres como "number".

Reconoce valores ausentes

let city;
let middleName = null;
console.log(city);       // undefined
console.log(middleName); // null

undefined suele significar que JavaScript no ha recibido un valor, como ocurre con un let sin inicializar. null suele asignarse deliberadamente para indicar «vacío» o «sin valor». Comprueba si un valor está vacío de forma deliberada con middleName === null.

No uses typeof value === "object" para comprobar si un valor es null. typeof null da "object" debido a un comportamiento histórico del lenguaje, aunque null es un valor primitivo.

Conoce la lista completa de tipos

JavaScript tiene siete tipos primitivos: number, string, boolean, undefined, null, bigint y symbol. El octavo tipo es object, que se usa para valores estructurados. Las funciones son objetos a los que se puede llamar, aunque typeof devuelve "function" para ellas.

Un bigint es un número entero escrito con una n al final, como 9007199254740993n. Permite representar enteros grandes de forma exacta. No mezcles un bigint y un number en operaciones aritméticas: 1n + 2 genera TypeError. Un symbol es un identificador único; typeof Symbol("id") da "symbol". typeof 42n da "bigint".

NaN es otro resultado especial que debes reconocer: a pesar de su nombre, «no es un número», typeof NaN es "number". Es un valor numérico que indica un resultado numérico no válido. Su nombre por sí solo no identifica un tipo distinto.

Sigue una variable que cambia

let data = 42;
console.log(typeof data); // number
data = "forty-two";
console.log(typeof data); // string

Esto es tipado dinámico. La reasignación puede sustituir un número por una cadena de caracteres. Esa flexibilidad hace útil mostrar tanto el valor como su tipo cuando un resultado sorprende:

const input = "7";
console.log(input, typeof input); // 7 string
console.log(input + 1);           // 71
console.log(7 + 1);               // 8

La primera suma une texto; la segunda suma números. Los valores primitivos no pueden cambiar directamente: una operación crea un valor nuevo. Actualizar una variable cambia el valor al que se refiere.

JavaScript usa un único tipo numérico ordinario para valores enteros y decimales. La división conserva la parte fraccionaria: 10 / 4 da 2.5. Tanto el operador que eliges como el orden en que se ejecuta afectan al resultado.

Calcula en el orden deseado

Las potencias se ejecutan antes que la multiplicación, la división y el resto; estas operaciones se ejecutan antes que la suma y la resta. Los operadores del mismo nivel se ejecutan de izquierda a derecha, salvo las potencias, que se agrupan de derecha a izquierda: 2 ** 3 ** 2 es 2 ** 9, o 512. Los paréntesis cambian ese orden: 2 + 3 * 4 da 14, pero (2 + 3) * 4 da 20.

Para calcular la media de 72, 85 y 90, suma todo el grupo antes de dividir:

const average = (72 + 85 + 90) / 3;
console.log(average); // 82.33333333333333

Sin paréntesis, 72 + 85 + 90 / 3 solo divide 90 y da 187.

Separa las unidades enteras y los restos

Math.trunc(7 / 2) elimina la parte fraccionaria y da 3. Para una longitud positiva de 245 cm, Math.floor(245 / 100) da 2 metros, y 245 % 100 da 45 centímetros restantes. Del mismo modo, 3725 segundos dan 1 hora con Math.floor(3725 / 3600), 2 minutos con Math.floor((3725 % 3600) / 60) y 5 segundos con 3725 % 60. Para un entero, n % 2 === 0 comprueba si es par. Un resto tiene el signo del operando izquierdo: -7 % 3 da -1.

Actualiza un número

x += 5 significa x = x + 5. Los operadores -=, *=, /=, %= y **= siguen el mismo patrón. Partiendo de 10, las actualizaciones += 5, *= 2, -= 4 y luego /= 2 dan 15, 30, 26 y luego 13.

++ aumenta en uno y -- disminuye en uno. Con let a = 5; let b = a++;, a pasa a ser 6, pero b recibe 5: el incremento posfijo devuelve el valor anterior. Con let b = ++a;, partiendo de nuevo de a = 5, ambos pasan a ser 6. Una actualización en su propia línea evita depender del resultado de esa expresión.

Redondea y da formato de forma deliberada

Math.round(13.456 * 100) / 100 da el número 13.46. En cambio, (3.14159).toFixed(2) da la cadena de caracteres "3.14", y (19.999).toFixed(2) da "20.00". Da formato al final: añadir un número a una cadena con formato une texto.

Reconoce los límites numéricos

Los números usan coma flotante binaria de 64 bits. La mayoría de las fracciones decimales son aproximadas, por lo que 0.1 + 0.2 es 0.30000000000000004. Redondea para mostrar el resultado, compara con una tolerancia pequeña adecuada o calcula en unidades enteras como centavos o milímetros.

Algunas operaciones no válidas devuelven un valor en vez de generar un error: 5 / 0 es Infinity, -5 / 0 es -Infinity, y 0 / 0 o "abc" * 2 es NaN. La mayoría de las operaciones aritméticas con NaN siguen dando NaN; NaN ** 0 es una excepción y da 1.

Todos los enteros hasta Number.MAX_SAFE_INTEGER, 9007199254740991, son exactos. Más allá, solo se pueden representar algunos enteros: 9007199254740992 + 1 sigue dando 9007199254740992. Los bigints permiten representar enteros exactos más grandes.

Una cadena de caracteres almacena texto entre comillas simples, comillas dobles o acentos graves que coinciden. Para texto sin más, las tres formas pueden representar el mismo valor. Las comillas marcan dónde comienza y termina el texto; no forman parte de ese valor.

Comillas, secuencias de escape y unión

Usa el otro tipo de comillas para incluir una comilla: "It's late". Una secuencia de escape usa una barra invertida, como en 'It\'s late'. \n representa un salto de línea, \t un tabulador y \\ una barra invertida. La secuencia de escape \n ocupa una posición en la cadena, aunque se escriba con dos símbolos. "It's".length es 4; "Line 1\nLine 2".length es 13.

El operador + concatena cadenas de caracteres. "Hello" + " " + "world" da "Hello world"; no se inserta ningún espacio a menos que uno de los fragmentos lo contenga. Con let msg = "Hi"; msg += " there";, el valor actualizado es "Hi there".

Las posiciones empiezan en cero

const language = "JavaScript";
console.log(language.length); // 10
console.log(language[0]);     // J
console.log(language[4]);     // S
console.log(language[9]);     // t
console.log(language.at(-1)); // t
console.log(language[10]);    // undefined

El último índice es length - 1. Un argumento negativo para at() cuenta desde el final. length es una propiedad, no un método: language.length() genera TypeError. Más precisamente, las posiciones de las cadenas y length usan unidades de código UTF-16, las unidades que JavaScript usa para almacenar texto. Cada una de estas letras inglesas ordinarias ocupa una unidad; algunos símbolos y emojis ocupan más.

Guarda la cadena nueva

Las cadenas de caracteres son inmutables: su contenido no puede editarse directamente. Asignar word[0] = "b" cuando word es "cat" no crea "bat"; en modo estricto genera un error. Los métodos que transforman texto devuelven una cadena nueva:

let name = "ana";
name.toUpperCase();
console.log(name); // ana
name = name.toUpperCase();
console.log(name); // ANA

Llamar al método no basta para conservar su resultado. Escribir name.toUpperCase sin paréntesis ni siquiera lo llama.

Elige la operación de texto adecuada

toLowerCase() y toUpperCase() cambian entre mayúsculas y minúsculas; trim() elimina espacios en blanco en ambos extremos. El encadenamiento aplica cada método al resultado anterior: " Ana@Example.com ".trim().toLowerCase() da "ana@example.com".

includes(), startsWith() y endsWith() devuelven booleanos. Por ejemplo, "report.pdf".endsWith(".pdf") da true. indexOf() da la primera posición que coincide o -1: "JavaScript".indexOf("S") da 4, pero buscar "s" da -1. Las búsquedas distinguen entre mayúsculas y minúsculas. "JavaScript".includes("script") es false; convierte a minúsculas antes de esa búsqueda para obtener true.

slice(start, end) devuelve texto desde el índice inicial hasta el índice final, sin incluirlo. "JavaScript".slice(0, 4) da "Java"; .slice(4) y .slice(-6) dan "Script".

"a-b-c".replace("-", "+") da "a+b-c"; replaceAll() con los mismos argumentos da "a+b+c". "ab".repeat(3) da "ababab", y "5".padStart(3, "0") da "005". Para const city = "paris";, city[0].toUpperCase() + city.slice(1) produce "Paris" al unir una primera letra mayúscula al resto sin modificar.

Un literal de plantilla coloca texto entre acentos graves. Dentro de él, ${...} marca un marcador de posición cuya expresión se evaluará e insertará en el texto. Esto es útil cuando un mensaje combina varios valores con signos de puntuación, espacios o cálculos.

Interpreta un marcador de posición como una expresión

const name = "Ana";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Ana!

El motor lee name, obtiene "Ana" y lo coloca entre el saludo y el signo de exclamación. Los acentos graves y los símbolos del marcador de posición describen la cadena de caracteres; no aparecen en el mensaje resultante.

Con concatenación, la misma idea es "Hello, " + name + "!". Un mensaje más largo como "Hello, " + name + "! You have " + count + " new messages." requiere varios fragmentos entre comillas por separado. Una plantilla mantiene toda la frase unida: `Hello, ${name}! You have ${count} new messages.`. Los espacios siguen teniendo que escribirse donde los quieras.

Calcula y luego da formato dentro del marcador

const name = "Ana";
const tickets = 3;
const price = 4.5;
const receipt = `${name} bought ${tickets} tickets for ${(tickets * price).toFixed(2)} in total.`;
console.log(receipt);

La salida es «Ana bought 3 tickets for 13.50 in total.». Primero, tickets * price produce 13.5. Los paréntesis hacen que todo ese producto sea el objeto receptor de .toFixed(2), que produce "13.50". El marcador de posición inserta ese texto en la frase. Las variables numéricas price y tickets permanecen sin cambios.

Sin formato, un marcador de posición muestra la forma textual habitual del número. `${0.1 + 0.2}` da "0.30000000000000004". Darle formato dentro del marcador, `${(0.1 + 0.2).toFixed(2)}`, da "0.30".

Las expresiones sirven; las sentencias no

Un marcador de posición puede contener un valor, un cálculo, una llamada a un método o una expresión que elige un valor. Con birthYear = 1990, `You turn ${2026 - birthYear} this year.` da «You turn 36 this year.».

El operador condicional puede seleccionar texto en singular o plural:

const count = 1;
console.log(`You have ${count} ${count === 1 ? "item" : "items"}`);
// You have 1 item

La comparación elige una cadena de caracteres para insertar. Una sentencia if no puede sustituir esa expresión dentro de ${...} porque un marcador de posición necesita una expresión que produzca un valor.

Conserva la puntuación exacta

Solo los acentos graves activan los marcadores de posición. Con const n = 5;, "n + 1 = ${n + 1}" es texto normal y deja ${n + 1} sin cambios. La plantilla `n + 1 = ${n + 1}` da «n + 1 = 6». Un acento grave es un carácter distinto de una comilla simple.

Los saltos de línea escritos entre acentos graves se convierten en saltos de línea en la cadena resultante. Los espacios de sangría también pasan a formar parte de ella. Los valores ausentes se insertan como texto: `${undefined}` da "undefined", mientras que `${null}` da "null". Si un mensaje contiene inesperadamente «undefined», inspecciona la variable insertada y dónde se le asignó un valor.

La conversión explícita significa que escribes la conversión tú mismo, con una herramienta como Number(), String() o Boolean(). Esto hace visible el tipo deseado en el punto donde un valor entra en el cálculo.

Elige una conversión numérica

Number() lee todo el texto como un número e ignora los espacios en blanco que lo rodean. Number("1.5") da 1.5, y Number(" 12 ") da 12. Number("12px") da NaN porque no toda la cadena de caracteres es numérica. El código usa un punto decimal: Number("1,5") también da NaN.

parseInt() y parseFloat() leen un inicio numérico y se detienen cuando el texto deja de encajar. parseInt("12px", 10) da 12; parseFloat("3.75 kg") da 3.75. El analizador de enteros se detiene en el punto decimal, por lo que parseInt("0.5", 10) da 0. parseInt("abc", 10) da NaN porque no hay un inicio numérico. Pasa una base a parseInt(): parseInt("08", 10) da 8, mientras que parseInt("ff", 16) lee hexadecimal y da 255.

El operador más unario también convierte texto numérico ordinario: +"42" da 42.

Mantén la entrada ausente separada del cero

Un cuadro de entrada devuelve una cadena de caracteres o null. Cancelar devuelve null, y aceptar un cuadro vacío devuelve "". Ambos se convierten en cero con Number(), al igual que el texto que solo contiene espacios en blanco. Comprueba si falta una respuesta antes de convertir:

const input = prompt("Enter a quantity:");
if (input === null || input.trim() === "") {
  console.log("No quantity entered.");
} else {
  const quantity = Number(input);
  if (Number.isNaN(quantity)) {
    console.log("Please type a number.");
  } else {
    console.log(quantity + 1);
  }
}

El operador || omite la llamada a trim() cuando input es null. Escribir «12» lleva al cálculo numérico y muestra 13. Escribir «12px» lleva al mensaje de número no válido. Escribir «0» es una respuesta válida y muestra 1.

Usa Number.isNaN(value) para comprobar si hay un valor NaN real. value === NaN nunca se cumple. La función global más antigua isNaN() convierte primero su argumento: isNaN("hello") es true, pero Number.isNaN("hello") es false porque ese valor sigue siendo una cadena de caracteres.

Convierte a texto o a booleano

String(42) da "42", String(true) da "true" y String(null) da "null". (42).toString() también produce "42", pero llamar a .toString() sobre null o undefined genera TypeError. String() maneja ambos.

Boolean() devuelve false para false, 0, -0, 0n, "", null, undefined y NaN; estos son valores falsos en contexto booleano. Los navegadores también tienen el objeto heredado document.all, que es falso en contexto booleano. Los demás valores son verdaderos en contexto booleano. En particular, "0", "false" y una cadena que contiene un solo espacio son todos verdaderos en contexto booleano. !!value da la misma conversión booleana.

Para dos respuestas de un cuadro de entrada, "12" y "30", a + b produce "1230". Convierte primero ambas entradas: Number(a) + Number(b) da 42.

La conversión implícita de tipos es la conversión automática de tipos dentro de una operación. Sus reglas dependen del operador. Un cálculo que parece funcionar puede contener un valor de texto que haga fallar un paso posterior.

Sigue la regla de la suma

Para operandos ordinarios de tipo number, string, boolean, null y undefined, + une texto si cualquiera de los operandos es una cadena de caracteres. De lo contrario, realiza una conversión numérica y una suma. "5" + 2 da "52", y 2 + "5" da "25".

Evalúa una cadena de operaciones de izquierda a derecha:

console.log(1 + 2 + "3"); // 33
console.log("3" + 1 + 2); // 312

En la primera expresión, dos números suman 3; al añadir "3" se unen las dos formas textuales en "33". En la segunda, la primera operación ya produce "31", por lo que la operación final añade otro dígito. Los paréntesis pueden cambiar qué operación ocurre primero: "3" + (1 + 2) da "33".

Las demás operaciones aritméticas esperan números

La resta, la multiplicación, la división, el resto y las potencias convierten cadenas de caracteres numéricas en números. "5" - 2 da 3, "5" * "2" da 10 y "10" / "4" da 2.5. Una cadena como "abc" no puede convertirse en un número válido, por lo que "abc" * 2 da NaN. Los bigints tienen reglas aritméticas propias; mezclar uno con un número genera TypeError.

Esta diferencia puede ocultar un error:

const price = "20";
console.log(price * 3); // 60
console.log(price + 5); // 205

La multiplicación convierte el precio, pero no cambia la variable. La suma posterior sigue encontrando una cadena de caracteres. Convierte una vez donde llegan los datos de entrada y sigue trabajando con el resultado numérico.

Sigue pequeñas conversiones automáticas

En operaciones aritméticas numéricas, true se convierte en 1, false en 0 y null en 0. Así, true + true da 2, mientras que null + 1 da 1. undefined se convierte en NaN, por lo que undefined + 1 es NaN. Los operadores más y menos unarios convierten cadenas de caracteres numéricas: +"42" da 42, -"5" da -5 y +"" da 0.

++ siempre solicita una actualización numérica, pero += sigue la regla de la suma:

let count = "5";
count++;
console.log(count, typeof count); // 6 number
let label = "5";
label += 1;
console.log(label, typeof label); // 51 string

Las condiciones aplican una conversión distinta

Una condición if considera un valor verdadero o falso en contexto booleano. "0" es una cadena de caracteres no vacía y cumple la condición; el 0 numérico es falso en contexto booleano y omite el bloque. Si cero es una cantidad válida, una comprobación de su valor en contexto booleano no puede distinguir por sí sola el cero de una respuesta ausente. Para un valor representado por un número o null, quantity !== null comprueba explícitamente si está ausente.

La igualdad también ofrece dos comportamientos: "7" == 7 es true después de la conversión implícita, pero "7" === 7 es false porque la igualdad estricta conserva la distinción de tipos. Usa la igualdad estricta para comparaciones ordinarias.

Cuando un resultado es texto unido o NaN, muestra cada entrada junto a typeof input. Encuentra el primer tipo incorrecto y corrige la conversión ahí. Convertir "205" en número al final daría 205, no la suma deseada 25.

Una comparación produce un booleano. 7 > 3 es true, 5 >= 5 incluye la igualdad y es true, y 4 < 2 es false. Almacena un resultado como const isAdult = age >= 18; o úsalo directamente en una condición.

Prefiere la igualdad estricta

=== compara sin convertir tipos. Dos valores primitivos ordinarios deben tener el mismo tipo y valores coincidentes: 7 === 7 es true, mientras que "7" === 7 es false. !== invierte la igualdad estricta, por lo que "7" !== 7 es true.

La igualdad débil, ==, puede convertir los operandos. "7" == 7, 0 == "" y "0" == false son todos true. Su regla especial para valores ausentes hace que null == undefined sea verdadero, pero que null == 0 sea falso. != invierte la igualdad débil. Prefiere === y !==; un uso deliberado de value == null puede comprobar tanto null como undefined.

Distingue el orden textual del orden numérico

Dos cadenas de caracteres se comparan de izquierda a derecha mediante sus valores de código UTF-16. Para palabras inglesas ordinarias con el mismo uso de mayúsculas o minúsculas, "apple" < "banana" es true. Un prefijo coincidente más corto va primero: "apple" < "apples" es true. Entre las letras inglesas sin acento, las mayúsculas van antes que las minúsculas, por lo que "Zebra" < "apple" es true. Convertir ambas cadenas con toLowerCase() elimina esa diferencia de mayúsculas y minúsculas en comparaciones sencillas de letras inglesas.

Las cadenas de dígitos también siguen el orden textual:

console.log("10" < "9"); // true
console.log("10" < 9);   // false

En la primera comparación, el carácter «1» va antes que «9». En la segunda, un operando es numérico, por lo que el texto se convierte en el número 10. Convierte los datos numéricos de entrada de forma deliberada antes de comparar su magnitud. "abc" < 5 y "abc" > 5 dan ambos false porque la conversión numérica produce NaN.

Maneja primero los números ausentes y no válidos

NaN no es igual a sí mismo: tanto NaN === NaN como NaN == NaN son false. Usa Number.isNaN() para reconocerlo.

Las comparaciones relacionales convierten null en cero, por lo que null >= 0 es true, pero null > 0 es false. La igualdad tiene una regla distinta, por lo que null == 0 sigue siendo false. undefined se convierte en NaN en las comparaciones relacionales, por lo que undefined > 0 y undefined < 0 son falsos; undefined == 0 también es falso. Comprueba si falta un valor antes de tratarlo como una medida.

Compara decimales e intervalos

El redondeo binario hace que 0.1 + 0.2 === 0.3 sea falso. Para estos valores pequeños, funciona una comprobación con tolerancia:

const closeEnough = Math.abs((0.1 + 0.2) - 0.3) < 0.000001;
console.log(closeEnough); // true

Math.abs() elimina el signo de la diferencia. Elige una tolerancia adecuada para la magnitud y la precisión de los valores, o calcula en unidades enteras como milímetros.

No encadenes comprobaciones de intervalos como en matemáticas. Con x = 50, 0 < x < 10 primero produce true y luego compara ese booleano como 1 < 10, lo que da true. Del mismo modo, 3 > 2 > 1 se convierte en true > 1, o 1 > 1, que es falso. Escribe ambas comparaciones completas: x > 0 && x < 10.

Los operadores lógicos permiten que una condición exprese varios requisitos. Con operandos booleanos, && significa AND, || significa OR y ! significa NOT. Su orden de evaluación también permite proteger una operación que fallaría ante un valor ausente.

Expresa cada requisito

const temperatureC = 25;
const inRange = temperatureC >= 18 && temperatureC <= 30;
const outside = temperatureC < 18 || temperatureC > 30;

inRange es verdadero porque se cumplen ambos límites. outside es falso porque no se cumple ninguna de las comprobaciones de estar fuera. OR incluye el caso en que ambos lados son verdaderos; no significa «uno, pero nunca ambos».

Escribe cada comparación completa. color === "red" || "green" no comprueba si coincide con cualquiera de los dos colores. Con color = "blue", la primera comparación es falsa, pero la cadena de caracteres no vacía "green" es verdadera en contexto booleano. La comprobación deseada es color === "red" || color === "green".

Agrupa la condición que deseas expresar

NOT se aplica antes que AND, y AND antes que OR. Por tanto, true || false && false es verdadero, pero (true || false) && false es falso.

Supón que el acceso requiere iniciar sesión y tener el rol de administrador o de propietario. Escribe loggedIn && (isAdmin || isOwner). Sin paréntesis, loggedIn && isAdmin || isOwner permite que isOwner haga verdadera toda la expresión incluso con loggedIn = false. Los paréntesis mantienen el requisito de inicio de sesión vinculado a ambos roles.

Invertir una condición compuesta también cambia el conector. !(a && b) tiene el mismo valor de verdad que !a || !b; !(a || b) equivale a !a && !b. Para una temperatura fuera del intervalo que incluye sus extremos, invertir las dos comprobaciones de estar dentro cambia >= por <, <= por > y AND por OR.

Detente cuando se conozca el resultado

AND se detiene en el primer operando falso en contexto booleano; OR se detiene en el primero verdadero en contexto booleano. Esto es evaluación en cortocircuito. El operando omitido no se evalúa:

const input = null;
const hasText = input !== null && input.trim() !== "";
console.log(hasText); // false

La primera comprobación es falsa, por lo que nunca se llama a trim() sobre null. Invertir esas dos comprobaciones intentaría primero la operación insegura.

Estos operadores devuelven un operando, no necesariamente un booleano. "" || "Guest" devuelve "Guest"; "Sam" || "Guest" devuelve "Sam". "Ana" && "ok" devuelve "ok", y null && "x" devuelve null. Un if que los rodee comprueba después si el valor devuelto es verdadero o falso en contexto booleano.

Conserva los valores falsos en contexto booleano que tienen significado

Con quantity = 0, quantity || 1 da 1, pero quantity ?? 1 conserva 0. Con nickname = "", nickname || "Anonymous" da el valor de respaldo, mientras que nickname ?? "Anonymous" conserva la cadena de caracteres vacía. Usa ?? cuando esos valores tengan significado.

Usa paréntesis al mezclar ?? con AND u OR: a || b ?? c es un error de sintaxis, mientras que (a || b) ?? c tiene una agrupación explícita. NOT primero convierte a booleano y después lo invierte: !0 es verdadero y !"0" es falso. La doble negación, !!value, da un booleano.

Una sentencia if ejecuta un bloque cuando su condición es verdadera en contexto booleano. Un else se ejecuta cuando esa condición es falsa en contexto booleano. Usa llaves para mostrar exactamente qué sentencias pertenecen a cada rama.

Ordena una cadena de decisiones

Una cadena de condiciones else if comprueba de arriba abajo. Se ejecuta la primera condición que se cumple y se omiten todas las ramas posteriores:

const score = 85;
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

La primera comparación no se cumple; la segunda sí, por lo que grade pasa a ser "B". Comprobar primero score >= 70 captaría incluso una puntuación de 95 y asignaría "C". Para umbrales mínimos que se solapan, pon primero el más alto. La variable compartida grade se declara fuera de las ramas para que el código posterior pueda leerla.

Una condición compuesta puede mantener legible una decisión breve. El envío es gratuito para un total de pedido de al menos 50 o para un miembro; de lo contrario cuesta 4,95:

const orderTotal = 45;
const isMember = false;
let shipping;
if (orderTotal >= 50 || isMember) {
  shipping = 0;
} else {
  shipping = 4.95;
}
console.log(`To pay: ${orderTotal + shipping}`);
// To pay: 49.95

Dos condiciones anidadas sin ramas else a menudo se pueden unir con AND: if (isLoggedIn) { if (isAdmin) { ... } } ejecuta su código más interno bajo las mismas condiciones booleanas que if (isLoggedIn && isAdmin) { ... }.

Evita la puntuación que cambia la ruta

Sin llaves, solo la siguiente sentencia pertenece a un if; la sangría no puede añadirle otra sentencia. Un punto y coma inmediatamente después de la condición crea una sentencia vacía: if (x > 5); { ... } hace que el bloque siguiente se ejecute independientemente de la condición.

if (x = 5) asigna 5 y después comprueba si es verdadero en contexto booleano. Cambia x y cumple la condición porque 5 es verdadero en contexto booleano. Para comparar, usa if (x === 5).

Elige un valor con una expresión condicional

El operador condicional, o ternario, devuelve uno de dos valores:

const age = 17;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // minor

La forma es condition ? valueIfTrue : valueIfFalse. Úsalo para una elección breve dentro de una asignación o un literal de plantilla. Usa if/else para ramas de sentencias. Las expresiones condicionales muy anidadas hacen que las opciones sean difíciles de seguir.

Compara opciones fijas con switch

const day = "Sat";
let kind;
switch (day) {
  case "Sat":
  case "Sun":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

switch compara el valor de forma estricta con sus etiquetas de caso. Ambas etiquetas del fin de semana llegan a la misma asignación. break sale del switch; default maneja un valor que no coincide con ningún caso. switch ("2") no coincide con case 2: porque los tipos son distintos.

Después de una coincidencia, la ejecución continúa por los casos posteriores hasta un break o el final. Esta continuación entre casos (fall-through) puede ser deliberada, como con etiquetas consecutivas, o accidental. Si el caso 2 añade una palabra y carece de un break antes de que el caso 3 añada otra, se ejecutan ambas adiciones. Una etiqueta de caso es un punto de entrada, no una condición nueva que se comprueba después de cada sentencia.

Un programa puede fallar antes de empezar, detenerse durante la ejecución o terminar con un resultado incorrecto. Identifica qué ocurrió antes de cambiar el código. La consola aporta información sobre los errores, mientras que los registros con etiquetas revelan valores del código que se ejecuta.

Distingue tres tipos de problemas

Un error de sintaxis en un script no deshace otro script que ya se ejecutó. Una excepción no manejada en tiempo de ejecución detiene la ejecución actual en la sentencia que falla.

Lee el mensaje completo

Una entrada de la consola como Uncaught ReferenceError: totl is not defined indica el tipo de error y el nombre que falla. «Uncaught» significa que la excepción no se manejó. Una ubicación como app.js:2 señala el archivo y la línea; al hacer clic se abre ese código.

let total = 0;
total = totl + 5;
console.log(total);

La línea 1 se ejecuta. En la línea 2, JavaScript no puede leer totl, por lo que nunca completa esa asignación ni llega al registro final. Corregir el error de escritura por total hace que el script muestre 5.

Los mensajes de sintaxis habituales mencionan un ) ausente, un elemento inesperado o un elemento no válido. En console.log("hi";, falta el paréntesis de cierre. En if (x > 3 {, a la condición le falta el paréntesis de cierre. La línea indicada es donde el motor detectó el problema; inspecciona también justo encima por si hay una comilla o un delimitador sin cerrar.

Usa el tipo para acotar la causa

Un ReferenceError señala un nombre al que no se puede acceder: un error de escritura, un problema de ámbito o una lectura antes de la inicialización. Un TypeError significa que la operación no corresponde al valor, como "abc".length(), null.trim() o una reasignación a un const. Un RangeError puede deberse a un argumento no admitido, como (1.5).toFixed(101).

La formulación de los errores puede variar según el navegador. El tipo y el valor implicado son más útiles que memorizar toda la frase. Corrige el primer error relevante y vuelve a ejecutar, porque los mensajes posteriores pueden deberse a la misma causa.

Sigue un error lógico

Para una media incorrecta, muestra la suma y el resultado por separado:

const sum = 72 + 85 + 90;
const average = 72 + 85 + 90 / 3;
console.log("sum:", sum);         // 247
console.log("average:", average); // 187

La suma correcta acota el fallo al paso de división. Cambia el cálculo a sum / 3, que da 82.33333333333333. Cuando una suma une dígitos inesperadamente, muestra también los tipos: console.log("price:", price, typeof price);. Encuentra el primer valor que difiera de lo que esperas.

Usa console.warn() o console.error() para destacar tus propios mensajes de diagnóstico. Comprueba los filtros de nivel de la consola si parece faltar un registro. Un 404 significa que no se encontró un recurso, así que comprueba la ruta del script; otros fallos de carga requieren leer el mensaje completo. La falta de un registro de inicio también puede deberse a un filtro o a un error de sintaxis.

Reproduce el problema, lee el primer error, comprueba una causa probable con un pequeño cambio o registro, y después vuelve a ejecutar y comprueba el resultado esperado. Elimina los registros temporales cuando se haya corregido el error.

Un depurador te permite pausar un script en ejecución e inspeccionar los valores en ese momento exacto. Usa el panel Sources en Chrome o Edge, o el panel Debugger en Firefox. Esto es especialmente útil cuando un resultado incorrecto depende de varias operaciones anteriores.

Pausa antes de que se ejecute la línea

Abre el script en Sources y haz clic en un número de línea para establecer un punto de interrupción. La ejecución se pausa antes de que se ejecute esa línea. Si el código se ejecuta durante la carga de la página, recárgala después de establecer el punto de interrupción. El mero hecho de establecerlo no vuelve a ejecutar el código que ya terminó.

También puedes escribir debugger; en el script. Con un depurador activo, pausa la ejecución; sin él, no tiene efecto. Elimina esta sentencia antes de publicar el código.

Elige la siguiente acción

Algunas llamadas integradas no tienen código fuente JavaScript en el que puedas entrar paso a paso. El paso a paso por procedimientos es útil cuando quieres el resultado de la llamada sin seguir su funcionamiento interno.

Durante la pausa, pasa el cursor sobre un nombre para inspeccionarlo, lee los valores locales en Scope o añade una expresión a Watch. Las entradas de Watch como typeof price y total > 100 se vuelven a evaluar a medida que avanzas. La consola también puede evaluar expresiones usando el ámbito pausado.

Inspecciona un total engañoso

El envío gratuito debería comenzar en 50, pero este código lo concede para un subtotal de 45 más 4 de envío:

const subtotal = "45";
const shipping = 4;
const total = subtotal + shipping;
if (total >= 50) {
  console.log("Free shipping");
}

Establece un punto de interrupción en la línea del if y recarga la página. La asignación ya se ha ejecutado. Scope muestra subtotal como la cadena de caracteres "45" y total como "454". Una entrada typeof total en Watch indica "string". La comparación convierte "454" en número, por lo que total >= 50 se cumple.

El fallo está en la suma, antes de la comparación. Cambia el cálculo guardado a const total = Number(subtotal) + shipping;. Vuelve a cargar la página. El total ahora es el número 49 y la condición es falsa. Si pausas en la asignación, esta aún no se ha ejecutado: avanza sobre ella antes de inspeccionar el total inicializado.

Pausa solo donde sea útil

Un punto de interrupción condicional pausa solo cuando su expresión es verdadera, como total > 100. Haz clic derecho en el número de línea para añadir uno. Un punto de registro muestra un mensaje cada vez que se ejecuta su línea, sin pausar ni editar el script. Los puntos de interrupción por excepción pausan donde se genera una excepción, para que puedas inspeccionar los valores en el momento del fallo.

Recorrer paso a paso una cadena de condiciones else if revela a qué rama se llega y qué condición anterior impide las comprobaciones posteriores. Usa registros para unos pocos valores conocidos y el depurador cuando importen el orden o varios valores actuales. Haz la corrección final en el código guardado del proyecto: un cambio experimental en el navegador no es una edición permanente del proyecto. Vuelve a ejecutar el caso que fallaba y comprueba el resultado corregido.