Lección 29: Hoisting

🧠 Concepto

El hoisting (elevación) es el comportamiento de JavaScript donde las declaraciones de variables y funciones se mueven al inicio de su contexto antes de ejecutar el código.

Hoisting de funciones

Las declaraciones de funciones se elevan completas, permitiendo llamarlas antes de su definición:

saludar(); // "Hola" — funciona

function saludar() {
  console.log('Hola');
}

Hoisting de variables con var

Las variables declaradas con var se elevan pero sin su valor (quedan como undefined):

console.log(mensaje); // undefined (no da error)
var mensaje = 'Hola';
console.log(mensaje); // "Hola"

JavaScript interpreta el código anterior como:

var mensaje;
console.log(mensaje); // undefined
mensaje = 'Hola';
console.log(mensaje); // "Hola"

Temporal Dead Zone (TDZ) con let y const

Las variables declaradas con let y const también tienen hoisting, pero están en la Zona Muerta Temporal desde el inicio del bloque hasta su declaración. Acceder a ellas antes de la declaración lanza un ReferenceError:

// console.log(nombre); // ReferenceError: Cannot access 'nombre' before initialization
let nombre = 'Ana';

// console.log(edad); // ReferenceError
const edad = 25;

💻 Ejemplo

// Ejemplo completo de hoisting
console.log(typeof miFuncion); // "function" — elevada completamente
console.log(typeof miVar);     // "undefined" — elevada sin valor

var miVar = 'texto';

function miFuncion() {
  return 'soy una función';
}

// Con let/const
{
  // console.log(x); // ReferenceError: TDZ
  let x = 10;
  console.log(x); // 10
}

⚠️ Nota

Las expresiones de función (function expressions) no tienen hoisting completo. Solo la variable se eleva, no la asignación:

// test(); // TypeError: test is not a function
var test = function() {
  console.log('Función expresada');
};
test(); // Funciona aquí

Con let o const para function expressions:

// test2(); // ReferenceError: TDZ
const test2 = () => console.log('Arrow');
test2(); // Funciona

🎯 Tip

Para evitar confusiones con hoisting:

1. Declara todas las variables al inicio de su scope
2. Usa let y const en lugar de var
3. Define las funciones antes de usarlas (aunque técnicamente no es necesario con declaraciones)
4. Recuerda que la TDZ hace tu código más seguro al prevenir accesos prematuros

📝 Ejercicio

¿Cuál es la salida del siguiente código? Explica por qué.

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

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

// ¿Qué líneas dan error y cuáles imprimen undefined?