¿Qué es el Hoisting en JavaScript?

🚀 El hoisting (Izar en español) en JavaScript es un comportamiento bastante curioso de cómo JavaScript interpreta el código para luego ser ejecutado.

Se trata de un comportamiento predeterminado de JavaScript que mueve todas las declaraciones a la parte superior del contexto actual en el que se está ejecutando. 😬 ¡Ya sé que suena enredado!

Pero, en simple, esto significa que las variables y funciones pueden declararse antes de su uso, y que las variables pueden ser referenciadas antes de su declaración. ¡Pero cuidado! Veamos un ejemplo. 👨‍💻

// Usamos la variable bar, pero esta no existe antes de la declaración de la función.
const foo = () => {
     console.log(bar); // Error: bar no está declarado
}

// Pero si le asignamos un valor a bar y luego usamos la función foo() esto debería funcionar "bien".
let bar = 10;
foo();

En el anterior ejemplo podemos ver el hoisting en acción. Aunque si movemos la ejecución de la función foo() antes de darle un valor a la variable bar, el código no funcionará.

🤔 Pero… ¿Por qué podemos usar bar antes de su declaración y asignación de valor?

Bien, esto ocurre por el hoisting. Veamos cómo JavaScript está ejecutando ese bloque de código a continuación.

// JavaScript eleva todas las variables al principio de la ejecución y lee todas las variables.
let bar; // Declaración implícita de la variable `bar`
function foo() {
    console.log(bar); // Se usa la variable `bar` con la declaración implícita hecha por el hoisting
}

let bar = 10; // Declaración explícita de la variable `bar` donde asignamos su valor
foo();

✅ Y bien, en este ejemplo lo vemos aplicado con variables, pero el hoisting también se aplica a las funciones.

El hoisting es un comportamiento importante de JavaScript que es importante también comprender. 📚 Puede ser confuso al principio y generar ciertos errores que no logramos comprender, pero con un poco de práctica, lo entenderemos a la perfección. 📝

Para evitar errores causados por el hoisting, siempre es mejor declarar las variables y funciones explícitamente. Esto evitará que el código se ejecute de forma inesperada. 😎

ℹ️ Puedes ver más sobre el Hoisting en JavaScript en la documentación que tiene MDN en este enlace.