Guardando valores (Variables)

Un programa que solo muestra valores fijos no sirve de mucho. Lo interesante es guardar datos para usarlos después: el nombre del usuario, el total de un carrito, el número de intentos. Para eso existen las variables.

Una variable es como una caja con una etiqueta: guardas algo dentro, escribes su nombre en la etiqueta y, cuando necesitas el contenido, pides la caja por su nombre.

Objetivos

Al terminar esta lección deberías ser capaz de:

• Declarar variables con let y const.
• Entender la diferencia entre declarar, asignar e inicializar.
• Elegir entre let, const y var con criterio.
• Escribir nombres válidos y legibles.
• Entender el ámbito de bloque y evitar los errores típicos.

Declarar, asignar e inicializar

Aunque se suelen juntar, son tres ideas distintas:

Concepto	Qué significa	Ejemplo
Declarar	Crear la caja y darle nombre.	let edad;
Asignar	Meter un valor con =.	edad = 28;
Inicializar	Declarar y asignar en el mismo paso.	let edad = 28;

declarar-y-asignar.js

let edad; // declarada: existe, pero vale undefined
console.log(edad); // undefined

edad = 28; // asignada
console.log(edad); // 28

let nombre = "Ana"; // inicializada directamente
console.log(nombre); // "Ana"

El signo = no es una igualdad

En programación = significa “guarda esto aquí”, no “son iguales”. edad = 28 se lee “guarda 28 dentro de edad”. Para comparar se usa ===, como vimos en Operadores de comparación.

let y const

JavaScript moderno ofrece dos formas principales de declarar variables.

let: el valor puede cambiar

let.js

let contador = 0;
console.log(contador); // 0

contador = 1; // reasignar está permitido
contador = contador + 1;
console.log(contador); // 2

Úsalo cuando el valor va a cambiar con el tiempo: contadores, acumuladores, estado de un formulario.

const: la caja no se puede cambiar de contenido

const.js

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable ❌

Úsalo cuando el valor no va a reasignarse. Es la opción recomendada por defecto.

const exige valor inicial

const x; sin valor da error de sintaxis. Una constante debe inicializarse en el momento de declararla: const x = 5;.

Consejo

const impide cambiar la caja, no cambiar de opinión sobre su contenido: simplemente no podrás volver a usar el signo = con ese nombre.

var: la forma antigua

var existió antes de let y const. Sigue funcionando por compatibilidad, pero no se recomienda usarlo en código nuevo porque tiene un comportamiento confuso: no respeta los bloques {}, así que una variable declarada dentro de un if “se escapa” fuera.

var-vs-let.js

if (true) {
  var escapa = "salgo del bloque";
  let seQueda = "me quedo aquí";
}

console.log(escapa); // "salgo del bloque" ✅ (inesperado)
console.log(seQueda); // ReferenceError ❌ (correcto)

	var	let	const
Reasignable	Sí	Sí	No
Respeta bloques {}	❌ No	✅ Sí	✅ Sí
Necesita valor inicial	No	No	Sí
Recomendado hoy	❌ Evitar	✅ Cuando cambia	✅ Por defecto

Regla práctica: usa const siempre; cambia a let solo cuando descubras que necesitas reasignar. Olvida var.

Cómo nombrar variables

Reglas obligatorias

• Pueden contener letras, números, $ y _.
• No pueden empezar por un número.
• No pueden usar palabras reservadas (let, class, return, if…).
• Distinguen mayúsculas de minúsculas: edad, Edad y EDAD son tres variables distintas.

nombres-validos.js

let nombre = "Ana"; // ✅
let _temporal = 1; // ✅
let $elemento = 2; // ✅
let total2 = 3; // ✅
// let 2total = 4; ❌ empieza por número
// let let = 5; ❌ palabra reservada

Buenas costumbres

• camelCase: primera palabra en minúscula, las siguientes con mayúscula inicial → nombreCompleto, totalCarrito.
• Nombres descriptivos: edadUsuario mejor que e o dato.
• Constantes que nunca cambian suelen ir en mayúsculas: const IVA = 0.21;.
• Evita acentos y ñ en nombres de variables, aunque JavaScript los permita: facilita compartir código.

nombres-legibles.js

// ❌ Difícil de entender
const x = 21;
let a = x * 100;

// ✅ Se lee casi como una frase
const iva = 0.21;
let precioConIva = 100 + 100 * iva;

Ámbito: dónde vive una variable

El ámbito (scope) es la zona del código donde una variable existe. Con let y const, esa zona es el bloque entre llaves {} donde se declaró.

ambito.js

let fuera = "estoy fuera";

{
  let dentro = "estoy dentro";
  console.log(fuera); // ✅ se puede leer desde dentro
  console.log(dentro); // ✅
}

console.log(fuera); // ✅
console.log(dentro); // ❌ ReferenceError: no existe aquí fuera

Desde un bloque interior se puede leer lo de fuera, pero no al revés. Si dos variables se llaman igual en ámbitos distintos, la más cercana “tapa” a la otra (esto se llama shadowing):

shadowing.js

const mensaje = "global";

{
  const mensaje = "local";
  console.log(mensaje); // "local"
}

console.log(mensaje); // "global"

Ejemplo completo: un carrito sencillo

carrito.js

const IVA = 0.21; // no cambia
let total = 0; // sí cambiará

total = total + 10; // añadimos un producto
total = total + 15.5; // añadimos otro

const totalConIva = total + total * IVA;

console.log("Subtotal:", total); // 25.5
console.log("Total con IVA:", totalConIva); // 30.855

Fíjate en la elección: IVA y totalConIva son const porque no se reasignan; total es let porque se va sumando.

Errores frecuentes

Error	Qué pasa	Solución
Usar una variable sin declarar	ReferenceError	Declara con const o let antes.
Reasignar un const	TypeError	Usa let si necesitas cambiar el valor.
Declarar const sin valor	Error de sintaxis	Asigna un valor al declarar.
Usar var dentro de un if y leerlo fuera	Se “escapa” sin avisar	Usa let o const.
Escribir if (x = 5)	Asigna en vez de comparar	Usa ===.
Nombres de una sola letra	Código difícil de mantener	Usa nombres descriptivos.

Ejercicio

1. Declara const precio = 50 y let cantidad = 3. Calcula const total = precio * cantidad y muéstralo.
2. Intenta reasignar precio y lee el error completo.
3. Declara un bloque { let temporal = "hola"; } e intenta leer temporal fuera. Anota el error.
4. Declara const IVA = 0.21, intenta reasignarlo y lee el error completo.

Resumen

• Una variable es una caja con nombre que guarda un valor para reutilizarlo.
• = asigna, === compara.
• Usa const por defecto y let solo cuando el valor vaya a cambiar; evita var.
• const impide reasignar la variable; let sí permite cambiar su valor.
• Los nombres siguen reglas estrictas y, por costumbre, usan camelCase descriptivo.
• El ámbito de let y const es el bloque {} donde se declaran.

Siguiente paso: Estructuras de control IF.