DEV Community

Cover image for Entendiendo el Hoisting en JavaScript
Ulises Serrano
Ulises Serrano

Posted on

Entendiendo el Hoisting en JavaScript

Hoy toca tema básico que es un pilar de la programación en JavaScript y es el: hoisting. Forma parte del lenguaje es un concepto que tienes que aprender para poder progresar. Al principio suena como algo muy abstracto pero la verdad es que no es tan complicado.

El hoisting tiene que ver en como funciona el motor de JavaScript la gran mayoría ejecutan V8 JavaScript Engine: v8.dev es uno de los más ocupados y potentes. Surge de la innovación que tuvo que hace el equipo de Google Maps. Pero eso es para otro articulo.

Logo de V8

Ahora si como va: El hoisting hace referencia a que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto en realidad no pasa sino que se asignan en memoria, pero el código se queda exactamente en donde esta. Por ejemplo en el siguiente ejemplo vemos que primero esta la definición de la función y luego la mandamos a llamar, creo que no hay nada fuera de lo común.

Ejemplo de hoisting

Pero, ¿Qué pasa si lo ponemos al revés?, primero mandamos a traer la función y después esta la definición. Bueno acá esta lo divertido porque seguirá funcionando. Y esto es culpa del hoisting la función se asigna en memoria y esta disponible a lo largo del script.

Ejemplo de hoisting funcion

Ahora veamos un ejemplo con las variables que acá se pone la cosa buena. Si tenemos el siguiente ejemplo ¿Cuál crees que sea el resultado del console .log()?

Ejemplo de hoisting variable

Bueno pues el resultado sería el siguiente. Otra cosa interesante es que el sólo utiliza el hoisting en declaraciones, no inicializaciones. Esto quiere decir que si quiere ocupar una variable y no a sido asignada el motor de JavaScript por defecto asignara undefined.

Ejemplo de hoisting con variable

Si este articulo te gusto o aprendiste algo nuevo te agradecería que me siguieras y compartieras mi contenido para que más personas aprendan. Gracias.

Top comments (0)