JavaScript es un lenguaje que a menudo se comporta de maneras que pueden confundir a los recién llegados. Uno de esos comportamientos es hoisting, un concepto que todo desarrollador de JavaScript debería comprender para escribir código más predecible. En este artículo, exploraremos qué es la elevación, cómo funciona con variables y funciones, y cómo puede evitar los peligros asociados con ella.

¿Qué es la elevación?

Elevación se refiere al comportamiento predeterminado de JavaScript de mover declaraciones (pero no inicializaciones) a la parte superior de su alcance. Esto sucede durante la fase de compilación antes de que se ejecute el código. Esto significa que puedes usar variables y funciones antes de que sean declaradas en tu código.

Ejemplo:

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

En este ejemplo, es posible que espere un error de referencia porque myVar se usa antes de declararse. Sin embargo, debido al levantamiento, lo que realmente sucede es que la declaración var myVar se mueve a la parte superior de su alcance, mientras que la asignación (myVar = 5) permanece en su lugar. Internamente, JavaScript lo interpreta como:

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

Debido a esto, myVar está definida pero aún no asignada cuando se ejecuta console.log, por lo que genera un resultado indefinido.

Elevación y Variables

Analicemos cómo funciona la elevación con diferentes tipos de variables: var, let y const.

1. var Elevación

Con var, se elevan tanto la declaración como la variable. Sin embargo, sólo se mueve la declaración, no la cesión.

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

La declaración var a se eleva, pero la asignación ocurre más tarde, por lo que a no está definido cuando se registra.

2. let y const Izado

Las variables declaradas con let y const también se elevan, pero no se inicializan en indefinido como var. En cambio, ingresan a la Zona Muerta Temporal (TDZ) desde el inicio de su alcance hasta que se encuentra la declaración.

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

Aquí, b se eleva, pero no está disponible hasta que se ejecuta la línea de declaración real, lo que genera un error de referencia.

El mismo comportamiento se aplica a const, con la regla adicional de que las variables const deben inicializarse en el momento de la declaración.

Elevación y Funciones

Las declaraciones de funciones están completamente elevadas, lo que significa que tanto el nombre como el cuerpo de la función se mueven a la parte superior del alcance. Esto le permite llamar funciones antes de que sean declaradas.

Ejemplo de declaración de función:

greet(); // "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

Aquí, la declaración de función greet está completamente activada, por lo que se puede llamar a la función incluso antes de que el código alcance su definición.

Expresiones de funciones y elevación

Sin embargo, las expresiones de función no se elevan de la misma manera. Dado que se tratan como asignaciones, solo se eleva la declaración de la variable, no la definición de la función.

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

En este caso, la variable saludar se eleva, pero se asigna indefinida durante el proceso de elevación. Es por eso que llamar a greet() antes de la tarea arroja un TypeError.

Evitar problemas de elevación

Para evitar la confusión causada por el izado, siga estas prácticas recomendadas:

1. Declarar variables en la parte superior de su alcance – Aunque elevar las declaraciones se mueve a la parte superior, es una buena práctica declararlas al comienzo de sus respectivos alcances. Esto hace que su código sea más legible y predecible.

2. Utilice let y const en lugar de var: las variables declaradas con let y const tienen un alcance de bloque, lo que hace que el comportamiento de elevación sea más claro y menos propenso a errores. También reduce la probabilidad de hacer referencia accidentalmente a variables antes de su inicialización.

3. Organizar declaraciones de funciones – Declara tus funciones antes de usarlas para evitar depender del comportamiento de elevación.

Conclusión

Hoisting es una de las muchas peculiaridades de JavaScript, pero comprender cómo funciona puede ayudarte a escribir código más limpio y menos propenso a errores. Recuerde que si bien se elevan tanto las declaraciones de funciones como las variables, se comportan de manera diferente. Cíñete a let y const sobre var y mantén tu código bien organizado para evitar sorpresas.

Al tener en cuenta el izado, puedes hacer que tu código JavaScript sea más predecible y más fácil de mantener.