Saltar al contenido
variables.js · devschool

Variables en JavaScript

Lección 4 de 38 · 10 min de lectura · Actualizado el

En esta lección
  1. let: variables que cambian
  2. const: valores que no se reasignan
  3. ¿Y var?
  4. Declarar sin valor: undefined
  5. Tipado dinámico
  6. Declarar varias variables
  7. Cómo nombrar variables
  8. Errores frecuentes
  9. Resumen

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
  • let es la palabra que declara (crea) la variable.
  • edad es su nombre.
  • = asigna un valor. No significa “es igual” como en matemáticas, sino “guarda esto en la caja”.
  • 25 es 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 con var dentro de un if o un bucle sigue existiendo fuera.
  • Se puede usar antes de declararla sin error: vale undefined hasta 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: nombre y Nombre son variables distintas.
  • No pueden ser palabras reservadas del lenguaje, como let, if, class o function.
Nombre¿Válido?Motivo
precioTotalSícamelCase correcto
_internoSípuede empezar por _
$botonSípuede empezar por $
2jugadoresNoempieza por número
precio-totalNoel guion es la resta
precio totalNolleva espacio
classNopalabra 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. x o dato no dicen nada; precioConIva lo dice todo.
  • Los valores verdadero/falso suelen empezar por es, tiene o puede: 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

constletvar
Se puede reasignarNoSíSí
Hay que darle valor al crearlaSíNo (vale undefined)No
Se puede redeclararNoNoSí
Respeta los bloques { }SíSíNo
¿Usarla hoy?Por defectoSi el valor cambiaNo
  • Usa const por defecto y let cuando necesites reasignar.
  • const con un objeto o array permite cambiar su contenido, no la variable.
  • Nombres en camelCase, descriptivos y sin tildes ni ñ; constantes de configuración en MAYUSCULAS.
  • 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).

variables.js
Consola

Pon a prueba lo que has aprendido

[JavaScript] ¿Qué pasa al ejecutar este código?
const edad = 20;
edad = 21;

[JavaScript] ¿Qué recomendación se sigue hoy al declarar variables?

[JavaScript] ¿Qué muestra este código?
const equipo = ["Ana", "Luis"];
equipo.push("Eva");
console.log(equipo.length);

[JavaScript] ¿Qué muestra la consola?
let premio;
console.log(premio);

¿Te ha quedado claro? Márcala y verás tu progreso en el explorador.