Intentaré escribir, con mis propias palabras, una breve explicación de qué es el hoisting en JavaScript, en qué condiciones ocurre y cuáles son los errores comunes que cometemos.
Hoisting
Hoisting es un término que surgió en el mundo de JavaScript a partir de ECMAScript 2015 y, en resumen, permite que funciones, variables y clases puedan ser llamadas antes de ser definidas, dependiendo de algunos factores que veremos a continuación.
El hoisting es la capacidad de JavaScript de, en tiempo de compilación, almacenar en memoria todas las declaraciones de variables y/o funciones para que puedan ser utilizadas cuando se las invoque. Esto no significa que las declaraciones se muevan físicamente al inicio del contexto en el que se encuentran; simplemente se asignan en memoria antes de la ejecución del código.
Variables
Solo las declaraciones son hoisted, no las inicializaciones. Esto significa que no es posible asignar un valor a una variable después de haberla utilizado. En un escenario como este, la variable tendrá el valor undefined.
También es importante señalar que solo las variables creadas con var son hoisted; const y let no lo son. Si intentas utilizar una constante (const) antes de su declaración, la aplicación lanzará un error de referencia.
Ejemplos
value = 2024
console.log('Value', value)
// Will show "2024"
var value
console.log('Another Value', anotherValue)
// Will show "undefined"
var anotherValue = 2024
newLet = 2024
console.log('New Let', newLet)
// Will throw an error like this:
// ReferenceError: Cannot access 'newLet' before initialization
let newLet
console.log('Another Let', anotherLet)
// Will throw an error like this:
// ReferenceError: Cannot access 'anotherLet' before initialization
let anotherLet = 2024
console.log('Another Const', anotherConst)
// Will throw an error like this:
// ReferenceError: Cannot access 'anotherConst' before initialization
const anotherConst = 2024Funciones
Las declaraciones de funciones en JavaScript son hoisted, pero las function expressions no lo son.
Ejemplos
sayHello("John");
function sayHello(name) {
console.log("Hello " + name);
}
// Will show "Hello John"
sayGoodbye("John");
const sayGoodbye = (name) => {
console.log("Goodbye " + name);
};
// Will throw an error like this:
// ReferenceError: Cannot access 'sayGoodbye' before initialization
saySomething("John");
const saySomething = function (name) {
console.log("Something, " + name);
};
// Will throw an error like this:
// ReferenceError: Cannot access 'saySomething' before initializationTemporal Dead Zone (TDZ)
Las variables declaradas con const, let o class se consideran dentro de la Temporal Dead Zone (TDZ) desde el inicio del bloque hasta su declaración. Por eso, al intentar utilizar una de estas variables antes de su declaración, JavaScript lanza un ReferenceError. Más detalles sobre este tema se abordarán en un post futuro.
