#100DaysOfCode _ #Day26

Hoisting

Jose Luis Aguilar
3 min readSep 22, 2019

¿A qué me he dedicado hoy durante el reto #100DaysOfCode?

El día ha sido corto y lo he dedicado principalmente a rehacer mi CV con Canva. La hora de código ha pasado volada y con poca energía (te soy sincero) entre Codecademy y freeCodeCamp.

Hasta ahora había hecho siempre el cambio de diseño y actualizaciones del mismo con InDesign, pero esta gran herramienta de diseño (al menos para mi) permite hacer cosas bastante chulas en poco tiempo.

El contenido, por supuesto, lo pones tú.

No lo había usado anteriormente para el CV pero creo que a partir de ahora esta va a ser la herramienta elegida para casi todo, ya que hasta la fecha la venía usando para llevar a cabo muchos otros diseños (como el de las portadas del reto) y he decidido que, salvo necesidades más complejas, para diseños sencillos recurriré a ella.

¿Cuál es el aprendizaje obtenido?

El aprendizaje más interesante que he obtenido hoy viene del rato que le he dedicado a la lectura del libro YDKJS: Scope and Closures y es sobre un compartimiento propio de JavaScript conocido como Hoisting.

Resumiendo y simplificando el término, viene a significar que JS se encarga, en la mayoría de los casos (con excepciones) de mover las declararaciones (variables, funciones …) al inicio del “scope” en el que se encuentran.

El siguiente ejemplo es un clásico y explica muy bien este comportamiento.

Hemos llamado a la función antes de declararla. JS entiende que tanto la declaración como la llamada a esta están en el mismo Scope y es capaz de ejecutar el orden a la inversa.

Pero esto no está considerado como una buena práctica, por lo que debemos declarar las funciones al principio.

Además, con ES6, la llegada de let y const no hace posible el hoisting. Es decir, las variables declaradas con let y const se leen en la posición que se han declarado.

Otro ejemplo:

En el primer caso, aunque extraño, el orden es el siguiente:

  1. Se inicializa la variable “bar”
  2. Se ejecuta el console.log de “bar” que devuelve un “undefined”
  3. Se asigna 2 a la variable bar

Por eso al volver a llamar a bar, esta vez sí, nos devuelve 2.

¿Por qué sucede?, porque hoisting se aplica a la declaración de las variables, no a su asignación.

En el segundo caso, directamente nos arroja un error, ya que las dos líneas de código lanzadas juntas no se pueden ejecutar porque la primera lanza un “Reference error”…. ¿qué narices es “bar”?

El hosting es un comportamiento complejo y hay que tenerlo en cuenta a la hora de ejecutar nuestro código.

Para saber más te aconsejo una lectura:

Photo by João Silas on Unsplash

¿Qué tengo programado para mañana durante el reto?

Esta semana es la de meterse de cabeza con React. Es cierto que en el curso estamos dando AngularJS, pero he decidido (por recomendación y por interés propio) centrarme en este otro framework que me parece que me va a dar bastante más versatilidad a la hora de realizar aplicaciones web.

¡Así que vamos allá a por una nueva semana!

Keep Coding!

--

--

Jose Luis Aguilar

JavaScript Developer | Lean Thinking | Sport, reading and nature: my philosophy of life