JavaScript. ¿Qué es Hoisting y cuál es su función?
Hoisting, y no hosting es una de las características más peculiares del lenguaje de moda: JavaScript. Si eres novato en este lenguaje, es muy probable que hayas tenido que lidiar con ella sin entender muy bien qué estaba pasando. La verdad es que muchos desarrolladores desconocen, o simplemente se olvidan de este comportamiento de JavaScript.
Por eso hoy quiero compartir contigo sobre hoisting, pero antes de seguir leyendo te recomiendo leer los siguientes artículos:
- JavaScript. Conceptos fundamentales: la pila de llamadas
- Javascript. Conceptos fundamentales: Scopes y Alcances Privados
¿Qué es Hoisting?
Hosting, o elevación es el comportamiento por defecto de JavaScript de “mover declaraciones al principio” del código. Hosting es un término que se puede encontrar a partir de ECMAScript® 2015 Language Specification.
Es cierto que el término y concepto pueden ser un poco confusos a veces, pero piénsalo como una forma de referirse “al funcionamiento de los contextos de ejecución en JavaScript” que vimos en los “Conceptos fundamentales” de las semanas anteriores.
¿Qué es elevado (hoisted) en JavaScript?
Como hemos dicho anteriormente, JavaScript es confuso por muchas razones. Hablando de hoisting, es importante saber que en este lenguaje, una variable puede ser declarada después de ser usada. Sí, ¡esto significa que se puede usar una variable antes de declararla!
Veamos dos ejemplos:
Cómo has podido ver, los dos ejemplos anteriores retornan el mismo resultado. Esto se debe a al comportamiento “hoisting” en el que “todas las declaraciones se mueven a la parte superior del scope actual.
¿Qué pasa con las inicializaciones?
Tal como en el artículo anterior sobre "Scopes y Alcances Privados" hicimos referencia a los nuevos conceptos let y const, hoy también me parece importante referir que let i const no son elevados, al menos como esperas que se haga!
Lo que pasa es que JavaScript solamente eleva declaraciones, no inicializaciones.
Veamos dos ejemplos más con var:
Como has podido notar, y en el segundo ejemplo es undefined. ¿Por qué pasa eso? Bueno, por todo lo que explicamos en los artículos anteriores, pero también porque, como hemos dicho hoy, solamente se eleva la declaración, - en este caso de y - y no la inicialización - o sea "= 14" - a la cima. y existe gracias a hoisting pero su valor es undefined.
Veamos un ejemplo de cómo JavaScript ejecuta el código anterior:
Let y const
Además, porque let y const tienen un alcance local - declaraciones hechas con let y const no son accesibles fuera del scope inicial - , y sabes también que const requiere asignación de valor (inicialización).
¿Y las funciones?
Como bien sabes en JavaScript también podemos llamar funciones. JavaScript, colocando, elevando, poniendo en memoria las declaraciones de las funciones permite usar una función antes de declararla.
Por ejemplo, escribiendo el código de la manera esperada:
Es equivalente a llamar primero la función gracias al contexto de ejecución en JavaScript.
¿Qué puede pasar si me olvido de Hoisting?
JavaScript siempre interpreta tu código respetando sus “scopes”, por eso es una buena práctica, o buena regla declarar siempre todas las variables en el inicio de cada scope. Hacerlo permite evitar bugs y errores comunes en JavaScript.
¿Qué más debo saber sobre hoisting?
Se dice que “en hoisting” las declaraciones de variables se mueven al inicio, al principio de tu código. Sin embargo, lo que ocurre realmente es que las declaraciones se asignan en memoria durante la compilación, però se quedan donde las hayas escrito. ;)
Conclusión
Y eso es todo lo que debes saber hoy sobre hoisting en JavaScript. Espero que te ayude a desarrollar aplicaciones y a escribir código con menos errores y bugs.
Muy resumidamente, lo que debes tener en mente es que en JavaScript las variables declaradas con var son “elevadas” - no de forma física - a la parte superior de su scope funcional, local o global, independientemente donde hayas hecho la declaración. Asimismo es importante recordar que JavaScript solamente eleva a declaraciones, no inicializaciones. Entender estos conceptos te permite entender cómo hoisting afecta tu código.
¿Conocías hoisting? ¿Tienes alguna “historia de JavaScript” relacionada con hoisting? ¡Déjanos un comentario abajo y comparte tu experiencia!
Fotografía: Susbany en Pixabay
Fuentes: