Hoisting en JavaScript

En JavaScript, el Hoisting es un comportamiento del motor de JavaScript que afecta la forma en que se interpretan las declaraciones de variables y funciones.

El hoisting hace que las declaraciones de variables y funciones sean “elevadas” al inicio de su contexto de ejecución.

Con “elevar” la declaración queremos decir, que el intérprete sabe que existe una función, aunque la declaremos más adelante en el código.

El hoisting es una característica muy útil, que nos facilita el desarrollo. Sin embargo, también es uno de los conceptos menos entendidos y que generan más confusión.

Así que vamos a verla 👇

Para que sirve el Hoisting

Como decía, el Hoisting consiste en que el intérprete conoce las variables o funciones, antes de su declaración. Es decir, que podemos hacer esto.

saludar(); // Output: "Hola, mundo!"

function saludar() {
    console.log("Hola, mundo!");
}

Así leído puede parecer un poco raro, pero tiene mucho sentido. El propósito del Hoisting es simplificarnos la vida al escribir el código.

Si no tuviéramos Hoisting, tendríamos que escribir las funciones en el mismo orden en el que las usamos.

function funcion1() {
    console.log("Hola, mundo!");
}

function funcion2() {
	funcion1();
}

Lo cuál puede parecer un problema pequeño. Pero a medida que escribes código, tendrías que estar constantemente cambiando el orden de las funciones (para que estén en el mismo orden en que las usas).

Esto sería un auténtico peñazo 🙅. Así que el intérprete primero se da una vuelta por todo el fichero recopilando las definiciones, para que sea más cómodo para nosotros.

Como funciona el Hoisting

console.log(sumar(5, 3)); // 8

function sumar(a, b) {
    return a + b;
}

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

let miLetVariable = 10;

Ejemplo: Variable que contiene una función

Vamos a ver un ejemplo con caso que puede puede generar algo de confusión. ¿Qué pasa si tenemos una variable que contiene una función?

Bueno, que una variable que contiene una función, sigue siendo una variable. Así que va a seguir las reglas que hemos visto de comportamiento de una variable.

Supongamos este caso,

console.log(multiplicar(5, 3)); 
// ReferenceError: Cannot access 'multiplicar' before initialization

let multiplicar = function(a, b) {
    return a * b;
};