Aprende qué es Hoisting en Javascript en 5 minutos

Hoisting es un proceso importante para Javascript que ocurre antes de ejecutar el código.

En mi experiencia, es de las preguntas que más les gusta hacer en las entrevistas de JS en niveles avanzados. Siendo sincero este concepto es muy simple, incluso si no lo conoces, solo necesitas un par de minutos para que alguien te lo explique. ¿Por qué les gusta preguntarlo entonces?

Así como muchos otros conceptos en Javascript (como shadowing o scope), el conocer como funciona el lenguaje a la hora de ejecutar el código es algo que demuestra tu dominio del mismo. Saberlo te servirá tanto para contestar las preguntas de las entrevistas correctamente como para que, al juntarlo con los demás conceptos, te permita solucionar cualquier bug que te encuentres con relativa facilidad.

Ahora bien podría solamente explicarte que es el hoisting y dejarte ir, pero ya que estás aquí creo que vale la pena que te tomes unos minutos extra para no solo entenderlo, sino para grabarlo en tu mente.

Todo comienza con la pregunta. ¿En qué momento exactamente se puede utilizar una variable?

“Pues…después de declararla y asignarle un valor ¿no? Qué pregunta tan–”

Noooo, te equivocaste.

La respuesta es, como todo en Javascript, más compleja de lo que parece.

console.log('value = ', value)
myFunction()

var value = 1234

function myFunction() {
    console.log('myFunction was called')
}

Al ejecutar este código los logs imprimen lo siguiente:

value =  undefined
myFunction was called
value =  1234

¿Qué es lo que ocurrió aquí exactamente?

1. Javascript fue capaz de utilizar la variable value antes de que fuera declarada pero le asigno un valor undefined.
2. Posteriormente realizó una llamada a myFunction() pero también lo hizo antes de que la función fuera declarada.
3. Al final volvió a llamar a value después de haber asignadole un valor y esta vez si imprimió dicho valor.

¿Por qué puedes llamar a value y a myFunction antes de sus declaraciones en las líneas 4 y 6 respectivamente?

Es por el hoisting.

Al leer tu código , Javascript encuentra todos los identificadores que puede y los mueve al principio del código.

*Los identificadores son los nombres que se les da a una variabale o función declarada.

Esto hace que el código del ejemplo anterior, realmente se ejecuté como si hubiera sido escrito así:

var value

function myFunction() {
    console.log('myFunction was called')
}

console.log('value = ', value)
myFunction()

value = 1234
console.log('value = ', value)

Si te fijas es como si hubiera movido solo las líneas donde encontró declaraciones, no las asignaciones, las cuales dejo en su lugar. Así mismo todas las variables siempre serán inicializadas con el valor por default en Javascript: undefined.

Con esto creo que ya tienes más que claro como funciona hoisting. Pero es importante que recuerdes que este proceso no mueve el código como tal. En realidad Javascript guarda las referencias conforme las va encontrando y luego corre el resto del código.

Sin embargo para tu entender y explicar cómo se comporta el hoisting es más fácil visualizarlo como si en verdad Javascript reacomodara las sentencias.