Conceptos Interesantes de JavaScript (I): Hoisting

Buscando en Internet una ruta de aprendizaje para la carrera de Frontend Developer; inevitablemente encontré el roadmap de Kamran Ahmed. Donde de una manera agradable presenta los conocimientos necesarios (según su criterio) para ser un Frontend Developer.

Photo by Goran Ivos on Unsplash

De profesión soy Contador Público y al momento de decidir cambiar de carrera para dedicarme a lo que realmente me apasiona; tropecé con este desconcertante mundo gigantesco de lenguajes, librerías y frameworks.

Razón por la cual, decidí plantear mi ruta de aprendizaje en la propuesta de Kamran Ahmed y de esta forma; paso a paso, llegar al deseado título de “Full Stack Developer”. Todavía queda camino por andar, pero si algo para tener en consideración es que si fuera sencillo, no sería tan emocionante.

Goku en el camino de la serpiente

(es inevitable sentirse como goku en el camino de la serpiente)

Como forma de afianzar conocimientos y su vez; crear contenido para aquellas personas que se encuentran situación similar. Me pareció interesante desarrollar un artículo sobre los Conceptos Interesantes de JavaScript que de acuerdo al roadmap, todo desarrollador debe conocer.

JavaScript: Conceptos Interesantes

Conceptos básicos de JavaScript según el Frontend Developer roadmap
(Conceptos básicos de JavaScript según el Frontend Developer roadmap)

En cinco cuadros están concentrados las competencias básicas que cualquier Frontend Developer debe tener en JavaScript; sin embargo, a efectos del presente artículo nos concentraremos en el último, específicamente, los siguientes puntos:

  • Hoisting
  • Event Bubbling
  • Scope Prototype
  • Shadow DOM
  • Strict Mode

Empecemos a detallar de qué va el primero de estos conceptos:

Hoisting

Cuyo significado es “Elevar”. Corresponde al comportamiento por defecto del intérprete de JavaScript; que durante la compilación «mueve» las declaraciones de variables y funciones al inicio de cada contexto (scope).

Esto nos permite utilizar una variable o función antes de declararla, como podemos demostrar a continuación:

x = 2;

saludar(); // Muestra: Hola como estas? en la consola.
console.log(x); // Muestra: 2.

function saludar(){
  console.log('Hola como estas?');
}
var x;

De lo anterior podemos evidenciar que al invocar la función “saludar” y hacerle un log a la variable “x”, el resultado es el esperado a pesar que su declaración fue posterior al llamado realizado. Esto se conoce como hoisting, donde internamente el intérprete de JavaScript hace lo siguiente:

// la declaración de la función saludar y la variable x son “elevadas” al comienzo del contexto.

function saludar(){
  console.log('Hola como estas?');
}
var x;
x = 2;

saludar(); // Muestra: Hola como estas? en la consola.
console.log(x); // Muestra: 2.

Sin embargo, esto es una representación visual de lo ocurrido cuando se ejecuta un código JavaScript. La correcta lectura es la siguiente: durante la fase de compilación el intérprete lee el código en busca de declaraciones de funciones o variables para su asignación en memoria.

Inicialización vs declaración de variables

Algo a tener en consideración es que JavaScript solo eleva declaraciones y no inicializaciones de variables, para entenderlo mejor, veamos un ejemplo:

console.log(año); // Muestra: undefined.

var año = 2019;

De lo anterior podemos comprobar, que al hacer un log de la variable «año» esta se imprime como undefined, debido que al compilar JavaScript interpreta el código de la siguiente manera:

var año,

console.log(año); // Muestra: undefined.

año = 2019;

Solo la declaración de la variable es elevada al comienzo del contexto, pero la asignación se “lee” en el orden que está escrita. Por esta razón, la variable año presenta un valor no definido.

Para tener en consideración:

Al escribir código JavaScript la presencia de este concepto inevitablemente ocasiona un comportamiento no deseado en el código. Por ello, en ECMAScript 6 con la introducción de nuevas formas de declaración de variables como let y const, este efecto se puede evitar.

Conociendo este concepto, podemos evitar su ocurrencia en el código e incluso aprovecharlo en situaciones específicas. La primera vez que leí sobre este, me pareció un comportamiento curioso del compilador de JavaScript. Verlo incluido dentro de las bases del lenguaje me hizo entender que es un tema a tener en consideración.

A medida que profundizo en el estudio de JavaScript, me encuentro con conceptos interesantes que muy bien pudieran ser replicados. Por lo tanto, el presente escrito corresponde a una serie de 5 artículos, donde estaré plasmando mis conclusiones sobre los conceptos que a lo largo de mi ruta captaron mi atención.

Deja un comentario

Tu dirección de correo electrónico no será publicada.