JavaScript es sin duda uno de los lenguajes más extraños en cuanto a su comportamiento, pues para muchos, se puede comportar de una forma impredecible, y uno de estos casos es algo llamado Hoisting, el cual es concepto para referirse a cómo funcionan el contexto de ejecución de JavaScript.
Si buscamos por Internet una definición de lo que es Hoisting, veremos que dice algo así como: “Las declaraciones de variables y funciones son enviadas físicamente al inicio del código”, sin embargo, esto no es del todo cierto, ya que si bien, si son enviadas al inicio del código, esto solo se hace en memoria, cuando JavaScript esta siendo interpretado por el navegador, sin embargo, los método y variables permanecen físicamente en el mismo lugar en donde fueron declaradas.
Básicamente la imagen anterior ilustra el concepto de Hoisting, pero la pregunta es, con qué intención JavaScript hace esto y por que no simplemente deja el código tal y como esta, bueno, la respuesta es simple, cuando JavaScript se ejecuta, carga todo el código en memoria para ejecutarlo, sin embargo, existe la limitante de que un método o variable no estará disponible si esta no ha sido definida antes de que sea utilizada, por tal motivo, si el Runtime de JavaScript ejecutara el código tal y como se ve del lado izquierdo, provocaría que el método helloworld no esté definido al momento de mandarlo a llamar, ya que la invocación se está haciendo antes de que la función fuera declarada, por este motivo, el Runtime coloca las variables y métodos al inicio, de esta forma, veremos algo como lo que vemos del lado derecho, donde el método es colocado al inicio del código y cuando se realice la llamada a la función, está ya estará definida.
Algo a tomar en cuenta es que tanto las variables como las funciones no se envían arbitrariamente al comienzo del código, sino que se envían al comienzo del contexto que las contiene, por ejemplo, una variable definida dentro de una función, será enviada al comienzo de la función, no de todo el código.
El ejemplo anterior es también un poco confuso, pues si observamos, tenemos dos variables llamadas a, una a nivel del archivo y otra a nivel del método, luego, cuando ejecutamos el método print, imprimimos la variable a, la cual se imprime como undefined, pero luego, declaramos la variable a = 20, e imprimimos nuevamente la variable, lo que ahora si nos arroja el valor 20.
¿Pero que diablos está pasando aquí?, pues bien, el Hoisting está haciendo nuevamente de las suyas, pues lo que en realidad está pasando es lo siguiente:
Observa como la variable a que está dentro de la función, en realidad está siendo llevada al comienzo de la función, pues la función es el contexto directo de la variable. Un dato importante a tomar en cuenta es que la asignación de la variable no se eleva al comienzo de la función, sino únicamente su declaración. Debido a esta elevación, a ya está disponible al momento de la primera impresión en pantalla, aun que su valor es undefined por que no se le ha asignado ningún valor. Es cuando a es igualada a 20, cuando la segunda impresión ya muestra el valor de 20.