Variables en JavaScript
En esta lección
Una variable es una caja con nombre donde guardas un dato para usarlo después. Puede ser un número, un texto, una lista… Sin variables un programa no podría recordar nada: ni la puntuación de un juego, ni el carrito de una tienda, ni el nombre del usuario que ha iniciado sesión. En esta lección aprenderás a crearlas con let y const, por qué var ya no se usa, cómo ponerles buenos nombres y qué errores vas a cometer al principio (para que los reconozcas enseguida).
let edad = 25;
console.log(edad); // 25
letes la palabra que declara (crea) la variable.edades su nombre.=asigna un valor. No significa “es igual” como en matemáticas, sino “guarda esto en la caja”.25es el valor.
let: variables que cambian
Con let puedes cambiar el valor todas las veces que quieras. Para cambiarlo, ya no se vuelve a escribir let:
let vidas = 3;
vidas = 2; // pierdes una vida
vidas = vidas - 1; // y otra: ahora vale 1
console.log(vidas); // 1
La última asignación se lee de derecha a izquierda: calcula vidas - 1 y guarda el resultado en vidas. Cambiar el valor de una variable se llama reasignar.
Como reasignar sumando o restando es tan habitual, existen atajos que verás en la lección de operadores:
let saldo = 100;
saldo += 50; // igual que saldo = saldo + 50
saldo -= 30; // igual que saldo = saldo - 30
console.log(saldo); // 120
const: valores que no se reasignan
Con const el valor queda fijo. Si intentas cambiarlo, da un error:
const IVA = 0.21;
IVA = 0.10; // TypeError: Assignment to constant variable.
Además, una const hay que inicializarla en la misma línea. No puedes dejarla vacía para rellenarla después:
const precio; // SyntaxError: Missing initializer in const declaration
¿Cuál uso? La recomendación actual es: usa const siempre, y cambia a let solo cuando necesites reasignar el valor. Así, al leer el código, sabes de un vistazo qué cosas cambian. En la práctica, la mayoría de variables de un programa son const: los datos que lees, los resultados de un cálculo, las funciones, los elementos de la página… let queda para contadores, acumuladores y valores que van cambiando.
const precioBase = 40; // no cambia
const descuento = 0.1; // no cambia
const precioFinal = precioBase * (1 - descuento);
let intentos = 0; // va a cambiar
intentos++;
console.log(precioFinal, intentos); // 36 1
const con objetos y arrays
Aquí se confunde casi todo el mundo. const impide reasignar la variable, es decir, que la caja apunte a otra cosa. Pero si la caja contiene un objeto o un array, su contenido sí se puede modificar:
const carrito = ["pan", "leche"];
carrito.push("huevos"); // permitido: cambia el contenido
console.log(carrito); // [ 'pan', 'leche', 'huevos' ]
const socio = { nombre: "Lucía", cuota: 30 };
socio.cuota = 35; // permitido
console.log(socio.cuota); // 35
carrito = ["agua"]; // TypeError: Assignment to constant variable.
Piensa en const como una etiqueta pegada a una caja concreta: no puedes despegarla y pegarla en otra caja, pero sí meter y sacar cosas de la caja. Por eso los arrays y objetos se declaran casi siempre con const. Si necesitas que un objeto no se pueda modificar en absoluto, existe Object.freeze, que verás en la lección de objetos.
Constantes en MAYÚSCULAS
Por convención, los valores fijos que conoces antes de ejecutar el programa (configuración, límites, tasas) se escriben en mayúsculas con guiones bajos. A este estilo se le llama UPPER_SNAKE_CASE:
const IVA = 0.21;
const MAX_INTENTOS = 3;
const URL_API = "https://api.ejemplo.com";
En cambio, una const que guarda un resultado calculado mientras se ejecuta el programa va en camelCase normal:
const total = 50 * (1 + IVA); // es const, pero se calcula: camelCase
No es una regla del lenguaje, sino un aviso para quien lee: “esto es un valor de configuración”.
¿Y var?
var es la forma antigua de crear variables. La verás en tutoriales viejos y en código de hace años, pero tiene comportamientos raros:
- No respeta los bloques
{ }: una variable creada convardentro de unifo un bucle sigue existiendo fuera. - Se puede usar antes de declararla sin error: vale
undefinedhasta llegar a la línea donde se declara. - Se puede redeclarar sin aviso, pisando otra variable con el mismo nombre.
if (true) {
var mensaje = "hola";
let secreto = "no me ves";
}
console.log(mensaje); // hola (var se escapa del bloque)
console.log(secreto); // ReferenceError: secreto is not defined
En código nuevo, usa let y const. Los detalles de dónde “vive” cada variable (el ámbito) y el famoso hoisting los tienes en ámbito, hoisting y closures.
Declarar sin valor: undefined
Con let puedes crear una variable sin darle valor. JavaScript le asigna automáticamente undefined, que significa “todavía no tiene valor”:
let ganador;
console.log(ganador); // undefined
ganador = "Equipo azul";
console.log(ganador); // Equipo azul
Es útil cuando el valor depende de algo que se decide más adelante, por ejemplo en un if:
const nota = 7;
let calificacion;
if (nota >= 5) {
calificacion = "Aprobado";
} else {
calificacion = "Suspenso";
}
console.log(calificacion); // Aprobado
La diferencia entre undefined y null la verás en tipos de datos.
Tipado dinámico
En lenguajes como Java, al crear una variable dices qué tipo de dato guardará (int edad = 25;) y ya no puede guardar otra cosa. JavaScript es de tipado dinámico: la variable no tiene tipo, lo tiene el valor que guarda en cada momento. La misma variable puede guardar un número y después un texto:
let dato = 42;
console.log(typeof dato); // number
dato = "cuarenta y dos";
console.log(typeof dato); // string
dato = true;
console.log(typeof dato); // boolean
Que se pueda no significa que sea buena idea. Una variable que cambia de tipo confunde a quien lee el código y provoca errores difíciles de encontrar. Buena costumbre: cada variable guarda siempre el mismo tipo de dato. Si quieres que el editor te lo exija, eso es justo lo que añade TypeScript.
Declarar varias variables
Puedes declarar varias en la misma línea separándolas con comas, aunque suele leerse mejor una por línea:
let x = 0, y = 0; // válido
const ancho = 800; // más claro: una por línea
const alto = 600;
console.log(x, y, ancho * alto); // 0 0 480000
Cómo nombrar variables
Reglas obligatorias (si no las cumples, el programa no arranca):
- Pueden llevar letras, números,
_y$, pero no pueden empezar por número. - No pueden llevar espacios ni guiones.
- Distinguen mayúsculas:
nombreyNombreson variables distintas. - No pueden ser palabras reservadas del lenguaje, como
let,if,classofunction.
| Nombre | ¿Válido? | Motivo |
|---|---|---|
precioTotal | Sí | camelCase correcto |
_interno | Sí | puede empezar por _ |
$boton | Sí | puede empezar por $ |
2jugadores | No | empieza por número |
precio-total | No | el guion es la resta |
precio total | No | lleva espacio |
class | No | palabra reservada |
Técnicamente también se admiten tildes y la ñ (let año = 2026; funciona), pero evítalas: dan problemas con teclados extranjeros, con algunas herramientas y en equipos internacionales. Escribe anio, tamanio, cancion.
Costumbres que conviene seguir:
- Usa camelCase: la primera palabra en minúscula y las siguientes empezando por mayúscula:
precioTotal,numeroDeIntentos. - Usa nombres que expliquen qué guardan.
xodatono dicen nada;precioConIvalo dice todo. - Los valores verdadero/falso suelen empezar por
es,tieneopuede:esSocio,tieneDescuento,puedeEntrar. - Los arrays, en plural:
alumnos,productos. Un elemento suelto, en singular:alumno.
// Mal
let a = 19.99;
let b = a * 1.21;
// Bien
const precioSinIva = 19.99;
const precioConIva = precioSinIva * 1.21;
Consejo: si te cuesta ponerle nombre a una variable, probablemente no tienes claro qué guarda. Pararte a pensarlo mejora el código.
Errores frecuentes
Usar una variable antes de declararla
Con let y const, la variable no se puede usar hasta la línea donde se declara:
console.log(total); // ReferenceError: Cannot access 'total' before initialization
let total = 10;
Solución: declara siempre las variables antes de usarlas, normalmente al principio del bloque donde las necesitas.
Usar una variable que no existe
Si escribes mal el nombre, JavaScript no la encuentra:
const nombreUsuario = "Carlos";
console.log(nombreusuario); // ReferenceError: nombreusuario is not defined
Fíjate en la u minúscula: para JavaScript son nombres distintos. Casi siempre este error es una errata.
Reasignar una const
const limite = 5;
limite = 6; // TypeError: Assignment to constant variable.
Si de verdad necesitas cambiar el valor, cámbiala a let. Si no, el error te ha salvado de un fallo.
Redeclarar con let o const
No puedes crear dos veces la misma variable en el mismo bloque:
let usuario = "Ana";
let usuario = "Luis"; // SyntaxError: Identifier 'usuario' has already been declared
Para cambiar el valor, reasigna sin let: usuario = "Luis";. Con var esto no daría error, y ese es precisamente uno de sus peligros.
Olvidar declarar
Si asignas a un nombre sin let ni const, en código antiguo JavaScript crea una variable global sin avisar. En modo estricto (y en los módulos, que lo activan solos) da error:
"use strict";
contador = 1; // ReferenceError: contador is not defined
Declara siempre tus variables.
Resumen
const | let | var | |
|---|---|---|---|
| Se puede reasignar | No | Sí | Sí |
| Hay que darle valor al crearla | Sí | No (vale undefined) | No |
| Se puede redeclarar | No | No | Sí |
Respeta los bloques { } | Sí | Sí | No |
| ¿Usarla hoy? | Por defecto | Si el valor cambia | No |
- Usa
constpor defecto yletcuando necesites reasignar. constcon un objeto o array permite cambiar su contenido, no la variable.- Nombres en camelCase, descriptivos y sin tildes ni
ñ; constantes de configuración enMAYUSCULAS. - JavaScript tiene tipado dinámico, pero mantén cada variable con un solo tipo.
- Declara antes de usar y nunca reasignes una
const.
Pruébalo tú
Cambia el código y pulsa Ejecutar (o Ctrl + Enter).
Pon a prueba lo que has aprendido
¿Te ha quedado claro? Márcala y verás tu progreso en el explorador.