miércoles 21 agosto 2024

Qué es hoisting en JavaScript

El hoisting (elevación) es un comportamiento en JavaScript que implica que las declaraciones de variables y funciones se "eleven" al comienzo de su contexto de ejecución, es decir, al inicio de su función o del script global. Aunque el código parece ejecutarse en el orden en que está escrito, JavaScript trata las declaraciones de una manera diferente, lo que puede dar lugar a resultados inesperados si no se comprende bien este concepto.

Cómo funciona el hoisting

En términos simples, cuando JavaScript ejecuta un script, primero procesa las declaraciones de variables y funciones, ubicándolas en la parte superior de su contexto de ejecución (global o de función), pero dejando las asignaciones en su lugar original. Esto significa que puedes usar variables y funciones antes de declararlas, aunque esto puede llevar a confusiones.

Ejemplo con variables:

console.log(miVariable); // undefined
var miVariable = 5;
console.log(miVariable); // 5

En el ejemplo anterior, aunque la variable miVariable se declara después del primer console.log, JavaScript la eleva (hoisting) al inicio de la función o del script, pero sin su valor asignado, por lo que imprime undefined en el primer console.log.

Internamente, JavaScript trata el código anterior como:

var miVariable;
console.log(miVariable); // undefined
miVariable = 5;
console.log(miVariable); // 5

Hoisting con funciones

El hoisting también se aplica a las funciones, pero hay una diferencia clave entre las funciones declaradas y las expresiones de función.

Ejemplo con funciones declaradas:

saludar();

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

Aquí, la función saludar se eleva completamente, lo que permite que se llame antes de su declaración sin problemas.

Internamente, JavaScript lo trata como:

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

saludar();

Ejemplo con expresiones de función:

saludar();

var saludar = function() {
    console.log("Hola!");
};

Este ejemplo generará un error porque saludar se eleva como una variable (sin su asignación), lo que significa que se trata como undefined en el momento en que se llama.

Hoisting con `let` y `const`

Las declaraciones realizadas con let y const también se elevan, pero a diferencia de var, no se inicializan con undefined. Intentar acceder a estas variables antes de su declaración resulta en un error de referencia (ReferenceError).

Ejemplo:

console.log(miVariable); // ReferenceError
let miVariable = 5;

En este caso, aunque miVariable se eleva, no se puede acceder a ella antes de su declaración debido a la "zona temporal muerta" (temporal dead zone).

Algunos ejemplos

1. Hoisting de variables con var:

console.log(a); // undefined
    var a = 10;
    console.log(a); // 10

2. Hoisting de funciones declaradas:

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

    function sumar(x, y) {
        return x + y;
    }

3. Error de hoisting con let y const:

console.log(b); // ReferenceError: Cannot access 'b' before initialization
    let b = 20;

Referencias a sitios oficiales

Para obtener más información sobre el hoisting y su impacto en el código, puedes visitar la documentación oficial de Mozilla.

Etiquetas:

javascript desarrollo web

Creado por:

Jorge García

Fullstack developer