¿Por qué a veces algo funciona "antes" de declararlo?
Quizá te ha pasado: llamas a una función en la línea 2 aunque la escribiste en la línea 20... y funciona. Magia no es: es el hoisting.
Hoisting ("elevación") es el comportamiento por el que JavaScript lee tu código y, antes de ejecutarlo, "sube" las declaraciones al principio de su ámbito. Como si ordenara la cocina antes de empezar a cocinar.
Funciones declaradas: se elevan completas
Por eso puedes llamar a una función antes de escribirla, sin que pase nada:
saludar(); // ✅ funciona
function saludar() {
console.log("¡Hola!");
}
Variables con let y const: la "zona muerta temporal"
Con las variables no es tan amable. let y const también se elevan, pero
JavaScript te las deja "reservadas pero bloqueadas": no puedes usarlas antes
de la línea donde las declaras. Si lo intentas, salta un error:
// console.log(x); // ❌ ReferenceError
let x = 5;
A ese tramo "prohibido" (desde el inicio del ámbito hasta su declaración) se le llama Temporal Dead Zone (zona muerta temporal). En el fondo es bueno: te avisa de un fallo en vez de seguir con un valor raro.
⚠️ Trampa clásica: var miente con un undefined
Con var la cosa se tuerce. Usar la variable antes de asignarla no da error:
devuelve undefined. Y un undefined silencioso es justo el tipo de bug que
tardas una hora en encontrar. Por eso te quedas con let y const: prefieres
un error claro a un undefined traicionero.
Ejemplos
Llamamos a sumar antes de definirla y aun así da 5: hoisting en acción
console.log(sumar(2, 3)); // 5, aunque la definición esté abajo
function sumar(a, b) {
return a + b;
}