Ir al contenido principal

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 toas formas, lo mejor es implementar la definición de variables de JavaScript EM6 Let y Const.

Comentarios

Entradas más populares de este blog

Definición de variables con JavaScript EM6

Let & ConstEs una nueva forma para definir variables
var: Usar para valores que cambiarán en una variable
let hace lo mismo que var
const: Usarlo solamente cuando se definen valores que no van a cambiar. Una prueba que podemos correr en la consola de JavaScript (en el navegador puedes presionar F12 y la opción console) var myName = 'Carlos';console.log(myName);​myName='Nathas';console.log(myName);La palabra var define una variable al igual que lo hace la nueva palabra let let myName = 'Carlos';console.log(myName);​myName='Nathas';console.log(myName);Los ejemplos anteriores no cambian en absoluto, pero si corremos el código con la palabra const un error tendremos

Funciones en JavaScript EM6

Funciones en JavaScript EM6 Recuerden que pueden jugar con JS desde el navegador con F12 y luego la opción console o desde https://jsbin.com La forma tradicional como definíamos una función era: function myFunction(){...}Un ejemplo puntual sería: function printMyName (name) { console.log(name);}​printMyName('Carlos');La nueva forma de hacerlo: const printMyName = (name) => { console.log(name);}​printMyName('Carlos');Si no necesitamos pasarle valores a la función podemos hacerlo de la siguiente manera: