Cuando comienzas a programar en JavaScript, puede que te encuentres con un comportamiento extraño: a veces parece que el código “funciona” incluso antes de que algo haya sido declarado.
Eso sucede por un mecanismo interno del lenguaje llamado hoisting.

En este artículo aprenderás qué es el hoisting, cómo funciona realmente y por qué puede causar confusión si no se entiende bien.

Qué significa “hoisting”

La palabra hoisting proviene del inglés y significa “elevar” o “levantar”.
En JavaScript, el hoisting es un comportamiento del motor del lenguaje que hace que las declaraciones de variables y funciones se “muevan” al inicio del ámbito (scope) antes de que el código se ejecute.

Esto no quiere decir que el código cambie de lugar físicamente, sino que JavaScript lo interpreta internamente como si las declaraciones aparecieran antes de su uso.

Ejemplo básico de hoisting

Veamos un ejemplo muy simple con var:

console.log(mensaje); 
var mensaje = "Hola mundo";

Podrías pensar que esto generará un error, porque estamos usando mensaje antes de declararla.
Sin embargo, el resultado es:

undefined

Esto ocurre porque JavaScript hace algo así internamente:

var mensaje; // Declaración “elevada” al inicio
console.log(mensaje); // undefined
mensaje = "Hola mundo"; // Asignación después

Es decir, la declaración se eleva, pero la asignación no.
Por eso el valor de mensaje es undefined al principio.

Hoisting con let y const

Cuando usamos let o const, el hoisting sigue existiendo, pero el comportamiento es distinto.

console.log(nombre);
let nombre = "Sofía";

Este código genera un error:

ReferenceError: Cannot access 'nombre' before initialization

¿Por qué?

Porque las variables declaradas con let y const también se elevan, pero quedan en una zona llamada «Temporal Dead Zone» (TDZ), donde no pueden usarse hasta que se ejecuta su línea de declaración.

Podríamos imaginarlo así:

1. JavaScript “detecta” que existe una variable nombre.
2. La reserva en memoria, pero no la inicializa todavía.
3. Si intentas usarla antes de su línea real de declaración, se lanza un error.

Por eso, en el siguiente ejemplo, sí funciona correctamente:

let nombre = "Sofía";
console.log(nombre); // Sofía

Diferencia entre var, let y const en el hoisting

Veamos una comparación directa:

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError
let b = 10;

console.log(c); // ReferenceError
const c = 15;

Así que aunque let y const también se “elevan”, su comportamiento es más estricto y seguro, evitando errores comunes de lógica.

Hoisting con declaraciones y asignaciones separadas

El hoisting afecta solo a la declaración, no a la asignación.
Veamos otro ejemplo que lo deja claro:

console.log(x); // undefined
var x;
x = 100;

Y este sería el equivalente real para el intérprete:

var x;        // Se eleva
console.log(x); // undefined
x = 100;      // Se asigna después

Pero si lo haces con let:

console.log(x);
let x = 100;

El resultado será:

ReferenceError: Cannot access 'x' before initialization

Esto demuestra que var ejecuta el hoisting completo (aunque peligroso), mientras que let y const lo manejan de forma más controlada.

Hoisting dentro de bloques

El hoisting también ocurre dentro de bloques {}.
Por ejemplo:

{
  console.log(saludo); // undefined
  var saludo = "Hola desde el bloque";
}

Aquí también se eleva la declaración de saludo, incluso si está dentro del bloque.
Pero si usamos let o const, la variable solo existe dentro del bloque y no puede usarse antes de su declaración:

{
  console.log(saludo); // ReferenceError
  let saludo = "Hola desde el bloque";
}

Esto muestra otra diferencia importante entre var y las variables modernas (let, const).

Cómo evitar errores relacionados con hoisting

El hoisting no siempre es “malo”, pero puede causar comportamientos inesperados.
Para evitar confusiones:

1. Declara tus variables antes de usarlas.
   Esto mejora la legibilidad y previene errores de referencia.
2. Usa let y const en lugar de var.
   Son más seguras y respetan el orden del código tal como lo escribes.
3. Mantén tus declaraciones agrupadas.
   Por ejemplo, coloca todas tus variables al inicio de un bloque o script.

let nombre = "Sofía";
let edad = 25;
const ciudad = "Monterrey";

console.log(nombre, edad, ciudad);

Conclusión

El hoisting en JavaScript es el proceso mediante el cual las declaraciones de variables y funciones se mueven internamente al principio del código antes de su ejecución.

• Con var, las variables se inicializan como undefined, lo que puede llevar a errores sutiles.
• Con let y const, el hoisting también ocurre, pero las variables permanecen en una zona temporal inaccesible (TDZ) hasta que se declaran.
• Por eso, en el desarrollo moderno, siempre se recomienda usar let y const, y declarar tus variables antes de usarlas.

Entender cómo funciona el hoisting te ayudará a leer y escribir código JavaScript con más confianza y evitar errores que suelen confundir a quienes están empezando.

Referencias recomendadas

• MDN Web Docs – Hoisting
• ECMAScript Specification – VariableStatement
• W3Schools – JavaScript Hoisting