004 - Hoisting

004 - Hoisting

Javascript tiene una característica bastante peculiar cuando trabaja con variables y funciones. Hablamos del Hoisting (elevamiento), el cual nos permite trabajar con funciones y variables que aún no han sido declaradas.

¿Qué es el Hoisting?

Es una implementación del intérprete de Javascript, que divide la declaración y asignación de funciones y variables. Javascript "eleva" la declaración de la variable/función a la parte superior del bloque de código dónde se haya declarado y luego se encarga de ejecutarla.

Veamos 2 ejemplos:

var miVariable = 'Hola Mundo';
console.log(miVariable);    // Hola Mundo

En este caso, la variable se declara y se le asigna un valor primero, y luego en la 2da línea se ejecuta. No hay problemas aquí

Luego, usando Hoisting:

console.log(miVariable);    // undefined
var miVariable = 'Hola Mundo';

Vemos que la variable primero se ejecuta y luego, en la 2da línea se declara y se le asigna un valor. Esto devolverá undefined, pues

¿Cómo funciona el Hoisting?

Debemos recordar el como se declara y se asigna una variable en Javascript:

// Declaracion
var foo;
let bar;

// Asignacion
foo = "foo";
bar = "bar";

Podemos declarar una variable sin ningún contenido (su valor sería "undefined") y luego asignarle un valor.

El Hoisting "eleva" la declaración de una variable o función al inicio del bloque de código (scope), dejando una variable declarada y sin valor. El Hoisting funciona de manera diferente para cuando usamos var, let y const.

Hoisting usando var

Al hacer hoisting a una variable declarada con var, su valor se inicializa como undefined hasta que le asignemos un nuevo valor:

console.log(foo); // undefined

var foo = 'bar';

console.log(foo); // "bar

Hemos dicho que el Hoisting lo que hace es dividir la declación y asignación de un valor a una variable. Así pues, el código de arriba puede ser replicado si dividimos el proceso:

var foo;

console.log(foo); // undefined

foo = 'foo';

console.log(foo); // "foo"

Obtenemos el mismo resultado, pues dividimos la declaración de la variable, se ejecuta con undefined y luego se le asigna un valor "foo" y luego se ejecuta de nuevo con valor "foo".

Hoisting usando let y const

A diferencia del Hoisting usando var, las variables no son inicializadas con un valor por defecto undefined. Acceder a una variable antes de que sea declarada genera un error:

console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization

let foo = 'bar';

Hoisting de Funciones

El Hoisting puede ser aplicado también a funciones, y es dónde más se suele ver esta implementación del intérprete de Javascript, pues nos permite ejecutar una función y luego, más abajo en el código poder definirla.

Se usa de la siguiente manera:

reiniciarPuntos();
dibujarTablero();
poblarTablero();
comenzarJuego();

function reiniciarPuntos() {
    console.log("Reinicializando puntos");
}

function dibujarTablero() {
    console.log("Dibujando tablero");
}

function poblarTablero() {
    console.log("Poblando tablero");
}

function comenzarJuego() {
    console.log("Comenzando juego");
}

Como se puede observar, las funciones han sido ejecutadas antes de ser declaradas. Este tipo de implementación en el código puede ayudarnos a interpretar mejor el código sin tener muchas definiciones de funciones molestando, sino que se colocan al final del documento, pues el Hoisting se encargará de "elevar" las definiciones al inicio del bloque de código para luego ejecutarlas sin ningún problema.


¡Gracias por leer!

Referencias

Hoisting - MDN Web Docs

¿Qué es Hoisting en JavaScript?

Did you find this article valuable?

Support Luidrawly Daily Blog by becoming a sponsor. Any amount is appreciated!