¿Qué es el hoisting en JavaScript?
Ver respuesta — intenta responderla en voz alta primero
El hoisting es el comportamiento por el cual las declaraciones de variables y funciones se "mueven" conceptualmente al inicio de su ámbito antes de que el código se ejecute. Las declaraciones de función y var sufren hoisting, pero var se inicializa en undefined, mientras que let y const quedan en la Zona Muerta Temporal.
Antes de ejecutar tu código, JavaScript "registra" las declaraciones. Esto crea la ilusión de que las mueve al inicio.
function nombre() {}: sufre hoisting por completo. Puedes llamarla antes de escribirla.var x: la declaración sufre hoisting, pero no la asignación. Por eso valeundefinedhasta que se ejecuta la línea que le da un valor.letyconst: también se registran, pero no puedes usarlas antes de declararlas. Están en la Zona Muerta Temporal y lanzan un error.
// Declaraciones de función: se pueden usar de antemano
saludar(); // "Hola" — funciona
function saludar() {
console.log("Hola");
}
// var: la declaración sufre hoisting, no el valor
console.log(x); // undefined (sin error, pero todavía no es 5)
var x = 5;
console.log(x); // 5
// let/const: error si se usan de antemano (Zona Muerta Temporal)
// console.log(y); // ReferenceError
let y = 10;
// Una expresión de función con var NO se comporta como una declaración
// miFuncion(); // TypeError: miFuncion is not a function
var miFuncion = function () {
console.log("expresión");
};
Creer que "el hoisting mueve físicamente el código al inicio". No mueve nada: JavaScript solo registra las declaraciones en memoria antes de ejecutar. Otro error es pensar que las expresiones de función (var f = function(){}) se comportan como las declaraciones de función: no lo hacen; solo la variable var sufre hoisting (como undefined).
"El hoisting es cuando JavaScript registra las declaraciones antes de ejecutar el código, dando la impresión de que las eleva al inicio. Las declaraciones de función sufren hoisting completo, así que puedo llamarlas antes de escribirlas. Con
var, la declaración sufre hoisting pero no el valor, por eso valeundefinedsi la uso de antemano. Conletyconst, si las uso antes de declararlas, obtengo un error por la Zona Muerta Temporal."
¿Qué imprime esto?
console.log(a);
console.log(b);
var a = 1;
function b() {}
Ver respuesta
Imprime undefined y luego [Function: b]. La declaración var a sufre hoisting pero no su valor (de ahí el undefined). La función b sufre hoisting por completo, así que ya existe.