Qué son y cómo usar variables en JavaScript

En JavaScript, las variables son contenedores de datos que nos permiten almacenar y manipular valores a lo largo de la ejecución de un programa.

En JavaScript las variables se declaran con la palabra reservada let, que se introdujo en ECMAScript 6 (2015).

Declaración de variables

Para declarar una variable simplemente utilizamos la palabra clave let seguida del nombre de la variable (y, opcionalmente, una asignación inicial).

La sintaxis básica para declarar una variable usando let es la siguiente:

let nombreVariable;

Por ejemplo, así

let mensaje = 'Hola, Mundo!';

console.log(mensaje); // 'Hola, Mundo!'

En este ejemplo,

• Hemos declarado una variable llamada mensaje
• Le hemos asignado el valor 'Hola, Mundo!'
• Luego, usamos console.log para imprimir el valor de mensaje

Inicialización de variables

La inicialización de una variable es el proceso de asignarle un valor inicial en el momento de su declaración. Esto se puede hacer simultáneamente con la declaración utilizando la siguiente sintaxis:

let nombreVariable = valor;

Por ejemplo,

let edad = 25;

En este ejemplo,

• Hemos declarado una variable llamada edad
• Le hemos asignado el valor 25

Modificación de variables

Las variables declaradas pueden ser reasignadas después de su inicialización. Esto significa que podemos cambiar el valor almacenado en una variable.

let numero = 42;
console.log(numero); // 42

numero = 100;
console.log(numero); // 100

En este ejemplo,

• Creamos una variable numero con valor 42
• Cambiamos el valor de la variable a 100

Alcance de bloque

En JavaScript las variables definidas con let tienen un alcance de bloque. Esto significa que una variable declarada con let solo es accesible dentro del bloque {} en el que se declara.

function ejemploBloque() {
    if (true) {
        let x = 10;
        console.log(x); // ✅ 10
    }
    console.log(x); // ❌ ReferenceError: x is not defined
}

En este ejemplo,

• La variable x está declarada dentro del bloque if
• Por lo que solo es accesible dentro de ese bloque
• Si intentamos acceder a x fuera del bloque da lugar a un error de referencia (ReferenceError)

Hoisting y TDZ

En JavaScript, las declaraciones de variables y funciones son “elevadas” al principio de su contexto de ejecución.

Sin embargo, las variables declaradas no está completamente disponible, hasta su definición. A esto le decimos que están en TDZ (temporal dead zone).

Vamos a verlo muy facilito con unos ejemplos 👇

¿Qué ocurre si accedemos a una variable que no está declarada?

Si intentas acceder a una variable que nunca ha sido declarada dentro de su ámbito, como:

function ejemplo() {
	console.log(a); // ReferenceError: a is not defined
}

JavaScript genera un ReferenceError, con el mensaje a is not defined.

ES decir, el motor de JavaScript no puede encontrar la variable en el ámbito actual ni en ningún ámbito superior (vamos, que no tiene ni idea de lo que estas hablándole).

¿Qué pasa si accedemos a una variable en la TDZ?

Sin embargo, vamos a ver que pasa si intentamos acceder a una variable que sí está declarada en el cuerpo, pero antes de su declaración (es decir, que está en su TDZ). Por ejemplo así,

function ejemploHoisting() {
    console.log(a); // ReferenceError: Cannot access 'a' before initialization
    let a = 5;
}

Ahora obtendremos un un error distinto Cannot access ‘a’ before initialization. Es decir, el motor de JavaScript sí sabe que existe a, pero no te deja tocarla.

Ejemplos Prácticos

Contador de iteraciones

for (let i = 0; i < 10; i++) {
  console.log(i);
}
// i no está definida fuera del bloque for
console.log(i); // Error: i is not defined

Filtrado de elementos en un array

let numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let numerosPares = numeros.filter(num => num % 2 === 0);
console.log(numerosPares); // [2, 4, 6, 8, 10]

Manejo de eventos

let botones = document.querySelectorAll("button");

botones.forEach((boton, index) => {
  boton.addEventListener("click", () => {
    console.log(`Botón ${index} clicado`);
  });
});

Manejo de datos asíncronos

async function obtenerDatos(url) {
  let respuesta = await fetch(url);
  let datos = await respuesta.json();
  console.log(datos);
}

let url = "https://api.ejemplo.com/datos";
obtenerDatos(url);