/Hoisting en JavaScript ¿qué es exactamente?
Hoisting

Hoisting en JavaScript ¿qué es exactamente?

¿Qué es Hoisting?

Empecemos con la definición técnica:

«El concepto de Hoisting fue pensado como una manera general de referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución). Sin embargo, el concepto puede ser un poco confuso al principio. Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de variables y funciones son asignadas en memoria durante la fase de compilación, pero quedan exactamente en dónde las has escrito en el código.» — Definición de Hoisting según MDN.


Ejemplos para entender que es Hoisting

Tenemos un archivo app.js con el siguiente código conectado a un index.html cualquiera, aquí solo nos interesa el contenido del archivo JavaScript:

Ya todos nos imaginamos cual es el resultado al ejecutar esto. El valor de la variable ‘a’ y el resultado de la función ‘b’ se mostrarán en pantalla, hasta aquí no hay nada de sorprendente. Pero si ahora invertimos un poco el orden de las lineas de tal forma que hagamos las llamadas  a la variable y función antes que se definan. Por ejemplo:

¿Que crees que pasará, obtendremos algún error? En realidad NO. Aquí es donde interviene el HOISTING.

Sucede que en el proceso de compilación de JavaScript se cargan todas las variables y funciones en memoria, es decir, antes que se ejecute nuestro código se buscan todas las variables y funciones para guardarlas en alguna parte de la memoria, sin embargo, en el caso de las variables estas solo se cargan con un valor «undefined«, ya que el valor de la misma se define en el propio código y que puede cambiar en la ejecución del mismo. Esto quiere decir que en el ejemplo de arriba el resultado sería:

Como podemos notar, no vemos directamente un error sino mas bien la variable mostrará un valor indefinido.

JavaScript EM6 y el Hoisting

JavaScript EM6 viene en nuestra ayuda al evitar que las variables sean ejecutadas al no
tener definido un valor. Por ejemplo, si cambiamos var por let:

El resultado será un error del estilo:

La existencia del Hoisting nos enfatiza la importancia de crear código organizado y lógico para evitar lidiar con resultados inesperados, sobre todo cuando estamos trabajando en proyectos extensos donde un error de este tipo puede hacer que gastemos mucho tiempo en el proceso del debugging.


De todas formas, lo mejor es implementar la definición de variables de JavaScript EM6 Let y Const.