El hoisting es un comportamiento fundamental de JavaScript que "eleva" las declaraciones de variables y funciones al inicio de su ámbito (ya sea el ámbito global o el de una función) antes de que el código se ejecute. Este mecanismo es parte del proceso interno del motor de JavaScript durante la fase de compilación, y aunque puede parecer útil, también puede generar comportamientos inesperados si no se entiende bien cómo funciona y cómo afecta a las variables.

🔹 Definición técnica y proceso interno

En JavaScript, el hoisting no significa que el código se reorganice físicamente, sino que el motor del lenguaje realiza un análisis previo del código en dos fases:

1. Fase de creación: Se registran todas las declaraciones (var, funciones) en el ámbito correspondiente.
2. Fase de ejecución: El código se ejecuta línea por línea, asignando valores donde corresponda.

Por eso, cuando declaras una variable con var o una función, JavaScript "sabe" que existen desde el principio del ámbito, incluso antes de llegar a la línea donde las escribiste.

🔹 Argumento: ¿Por qué importa el hoisting?

El hoisting puede ser un arma de doble filo. Por un lado, permite cierta flexibilidad (como usar una función antes de declararla). Por otro, si no se comprende, puede llevar a errores sutiles o comportamientos impredecibles, especialmente al trabajar con variables. La diferencia en cómo se aplica el hoisting entre var, let y const es clave para escribir código más seguro y predecible.

✅ Ejemplos prácticos y análisis detallado

1. Hoisting con var

Con var, la declaración se eleva, pero no la asignación. Esto significa que la variable existe desde el inicio del ámbito, pero su valor inicial es undefined hasta que se le asigna algo.

console.log(x); // undefined (la variable existe, pero no tiene valor)
var x = 5;
console.log(x); // 5

¿Qué pasa internamente? JavaScript reinterpreta el código así:

var x;              // Declaración elevada al inicio
console.log(x);     // undefined
x = 5;              // Asignación en su lugar original
console.log(x);     // 5

Explicación paso a paso:

• Durante la fase de creación, var x se registra en el ámbito.
• En la fase de ejecución, x existe pero no tiene valor hasta que llega la asignación (x = 5).
• Por eso, el primer console.log(x) muestra undefined.

2. Hoisting con let y const