let y const — controlar la reasignación y la redeclaración

Ya sea que estés totalizando un pedido o mostrando el nombre del usuario conectado, necesitas darle un nombre a un valor para poder referenciarlo repetidamente. Ese nombre es una variable (un nombre asociado a un valor — escribes el nombre y recuperas el mismo valor).

JavaScript te da dos formas de crear una variable, const y let, y cuál elijas decide si podrás cambiar por otro valor más adelante.

Nombrar un valor — elegir entre const y let

Escribe el mismo valor directamente en varios sitios de tu código, y tendrás que buscar cada aparición cuando necesite cambiar. Dale un nombre desde el principio a valores como un precio unitario o una tasa de impuestos, y referencia ese nombre a partir de ahí.

A la línea donde lo nombras se le llama declaración (la línea que crea el nombre de una variable y le da su primer valor).

Una declaración de JavaScript decide, en el mismo momento en que crea el nombre, si el contenido de ese nombre se podrá cambiar más adelante. Usa const si no, let si sí.

Poner un valor distinto en un nombre ya existente se llama reasignación (darle a un nombre ya declarado un valor distinto más adelante). Un nombre declarado con const no se puede reasignar, así que una buena costumbre es escribir const primero, y cambiar a let solo cuando aparezca una línea que necesite reasignarlo.

const — para valores que no vas a cambiar

const fija un valor en la línea donde lo declaras, y ese nombre nunca toma otro valor después. Cosas como el nombre de un producto, el precio unitario o la tasa de impuestos — valores que se mantienen iguales mientras avanza el proceso — encajan aquí, y la mayoría de valores de un programa lo hacen.

Una secuencia de caracteres entre comillas, como "Insulated Mug", se llama cadena (string), y un número como 1200 es un número (number). Ambos se cubren en detalle en los artículos 3 y 4.

console.log, que aparece en el siguiente ejemplo de código, es la instrucción que muestra en la pantalla de resultados, como texto, cualquier valor que le pases entre paréntesis. La consola de este sitio no tiene pantalla, así que le pasas cualquier valor que quieras comprobar.

Todo lo que va desde // hasta el final de la línea es un comentario (texto explicativo dejado en el código que nunca se ejecuta) y no aparecerá en la salida. Líneas como // ① que aparecen ya escritas en los ejercicios son este mismo tipo de nota.

// Los valores que no vas a cambiar usan const
const productName = "Insulated Mug";
const unitPrice = 1200;

console.log(productName);   // Insulated Mug
console.log(unitPrice);     // 1200

Guarda un producto de una tienda online en variables y muéstralo.

① Declara productName como "Insulated Mug", unitPrice como 1200, y quantity como 3, todas con const.

② Muestra el contenido de productName.

③ Calcula el subtotal a partir del precio unitario y la cantidad, y muéstralo.

(Si se ejecuta correctamente, aparecerá una explicación.)

let — variables a las que asignarás valores más adelante

Usa let para cosas como un contador de stock o un total acumulado — valores cuyo contenido cambia a medida que avanza el proceso. El lado derecho de = lee el valor actual tal cual, así que puedes leer el valor actual, calcular con él, y reasignar el resultado de vuelta al mismo nombre.

let orderTotal = 0;

orderTotal = orderTotal + 1200;  // Lee el 0 actual, suma 1200, reasigna
orderTotal = orderTotal + 400;   // Lee el 1200 actual, suma 400, reasigna

console.log(orderTotal);         // 1600

El stock de un almacén cambia con cada envío y cada entrega. stockCount ya está declarado con let.

① Tras un envío que reduce el stock en 3, reasigna el nuevo total a stockCount y muéstralo.

② Luego, tras una entrega que suma 10, reasigna el nuevo total a stockCount y muéstralo.

Reasignación vs redeclaración — dos errores que detienen la ejecución

Elegir const significa decidir, ahí mismo en el código, que el contenido de este nombre nunca cambia.

Asígnale un valor distinto después de eso, y JavaScript detiene la ejecución en esa línea y lanza un TypeError (un error por usar un valor de forma incorrecta). Nada después de esa línea se ejecuta.

La otra forma de detener la ejecución es la redeclaración (declarar de nuevo, en el mismo ámbito, un nombre ya usado). Ni const ni let lo permiten — obtienes un SyntaxError (un error por código que no sigue en absoluto la gramática del lenguaje).

Esto detecta al instante errores tipográficos en nombres, o un nombre reutilizado por accidente para otra cosa.

let cartQuantity = 1;
let cartQuantity = 2;
// SyntaxError: Identifier 'cartQuantity' has already been declared

Si solo quieres cambiar un valor, decláralo una sola vez, y luego asigna al nombre en cada línea siguiente. Una línea sin palabra clave de declaración es una reasignación, así que con let no detiene la ejecución.

let itemQuantity = 1;

itemQuantity = 2;            // Sin palabra clave de declaración, así que es una reasignación
console.log(itemQuantity);   // 2

Los errores aparecen en momentos distintos

El TypeError de la reasignación aparece en esa línea, en cuanto la ejecución llega ahí — así que lo que se ejecutó antes sigue apareciendo en la salida.

El SyntaxError de la redeclaración aparece mientras el código se está analizando, así que nada se ejecuta, ni siquiera la línea 1. Si no ves ninguna salida, sospecha primero de un error de sintaxis.

Los valores que no cambian, como una tasa de impuestos, se declaran con const. El código de abajo intenta reasignar esa tasa después. Ejecútalo tal cual y comprueba hasta dónde llega y qué mensaje lo detiene. (Esta vez solo ejecutas el código y lees el resultado — sin editar.)

Nombrar variables — camelCase y caracteres permitidos

El nombre de una variable es dónde le dices al lector qué es realmente el valor. Nombres como a o data te obligan a volver a la declaración cada vez que lees una línea lejana. Nombres como unitPrice o stockCount dejan leer el contenido directamente en el nombre.

Los nombres pueden usar letras, dígitos, guiones bajos y el signo de dólar, y no pueden empezar por un dígito. Las mayúsculas importan, así que stockcount y stockCount son variables distintas.

Palabras a las que JavaScript ya les ha dado significado, como const / let / if (palabras reservadas), no se pueden usar como nombres.

Para nombres formados por dos o más palabras, usa camelCase (empieza la primera palabra en minúscula, y pon en mayúscula solo la primera letra de cada palabra siguiente). priceWithTax u orderTotal tienen esta forma.

Las funciones y propiedades integradas de JavaScript siguen la misma forma, así que igualarla evita que tus propios nombres desentonen.

const listPrice = 1250;
const discountRate = 0.15;                 // 15% de descuento por ser miembro

// El nombre te dice qué es este importe
const discountedPrice = listPrice * (1 - discountRate);
console.log(discountedPrice);              // 1062.5

// Redondea hacia abajo cualquier cosa por debajo de un dólar
console.log(Math.floor(discountedPrice));  // 1062

Calcula el total de 2 unidades de un producto de alimentación con el tipo reducido del 8%. unitPrice, quantity y taxRate ya están declaradas.

① Guarda el subtotal antes de impuestos en una variable con un nombre camelCase.

② Guarda el precio con impuestos incluidos — el subtotal con el impuesto aplicado — en otro nombre camelCase, y muéstralo.

Por qué no usar var

El código y los tutoriales antiguos introducen una tercera declaración, var. var deja redeclarar el mismo nombre cualquier número de veces, no da error si lo referencias antes de su línea de declaración, y simplemente sigue adelante con un valor que aún no se ha fijado. El ámbito donde un nombre es válido también funciona distinto que con const / let.

Como no señala los errores en el momento, encontrar la causa lleva más tiempo.

El código nuevo no usa var

Tanto const como let marcan la redeclaración y las referencias antes de la declaración como errores. Este curso tampoco usa var de aquí en adelante. La mecánica completa del ámbito en sí se cubre otra vez en el artículo de ámbito, en la categoría de sintaxis.

Este artículo cubrió nombrar valores con const y let, el TypeError al reasignar un const, el SyntaxError de la redeclaración, y las reglas de nombrado incluyendo camelCase. Los valores que no vas a cambiar usan const; solo usa let los que sí — esa elección se mantiene en cada trozo de código de aquí en adelante.