Si eres nuevo en JavaScript, es posible que te hayas encontrado con situaciones confusas en las que las variables parecen no estar definidas o aparecen errores como ReferenceError inesperadamente. Esto a menudo se remonta a un concepto conocido como elevación. Pero, ¿qué es el izado y cómo afecta a tu código?

En esta guía, analizaremos el concepto de elevación y cómo funciona en JavaScript. Al final, comprenderá por qué ocurre la elevación y cómo puede evitar errores comunes.

¿Qué es la elevación?
Izar es el comportamiento de JavaScript de mover declaraciones de variables y funciones a la parte superior de su alcance antes de que se ejecute el código. Esto significa que las declaraciones (no las asignaciones) se procesan durante una fase de preparación antes de la ejecución real de su código.

JavaScript pasa primero por una fase de creación, donde asigna memoria para variables y funciones. Sin embargo, la forma en que maneja funciones y variables es ligeramente diferente.

Función de elevación: Definiciones de elevación total
Las funciones declaradas utilizando la palabra clave function se muestran con su definición completa. Esto le permite llamar o utilizar una función antes de su declaración real en el código.

Por ejemplo:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a   b);
}

Aunque la función sum() se llama antes de declararse en el código, funciona perfectamente porque la declaración de la función se eleva a la parte superior de su alcance durante la fase de creación.

Elevación variable: var, let y const
El levantamiento de variables se comporta de manera diferente al levantamiento de funciones y varía dependiendo de si usa var, let o const.

1. Declaraciones var
Cuando declaras una variable usando var, se eleva a la parte superior de su alcance con un valor predeterminado de indefinido. Esto significa que puede acceder a la variable antes de su declaración, pero hasta que le asigne un valor, la variable se mantendrá indefinida.

console.log(city); // Output: undefined
var city = "New York";
console.log(city); // Output: "New York"

En este ejemplo, la ciudad se eleva con un valor inicial indefinido. Una vez que se asigna el valor "Nueva York", el segundo console.log() genera correctamente "Nueva York".

2. Declaraciones let y const
Con let y const, las variables también se elevan, pero permanecen sin inicializar. Esto significa que si intentas acceder a ellos antes de su declaración, obtendrás un ReferenceError.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

Este error ocurre porque las variables let y const existen en algo llamado Zona Muerta Temporal (TDZ) entre el inicio de su alcance y el punto donde realmente se declaran. Durante este tiempo, no puede hacer referencia a la variable.

Diferencia clave entre let y const
Tanto let como const se comportan de manera similar en términos de elevación, pero const requiere que asigne un valor durante la declaración, mientras que let le permite declarar una variable sin asignar un valor inmediatamente.

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

Izado en la práctica
Veamos un ejemplo que demuestra el levantamiento funcional y variable en acción:

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x   y);
}

var city = "New York";
console.log(city); // Output: "New York"

Aquí, la función de suma se presenta con su definición completa, por lo que se puede llamar antes de declarar la función. Sin embargo, la ciudad aparece con un valor indefinido, lo que explica por qué el primer archivo console.log() genera un valor indefinido. Una vez que se produce la asignación, el segundo console.log() genera el valor correcto.

Consejos para evitar problemas de elevación
Para evitar problemas causados ​​por el izado, siga estas prácticas recomendadas:

1. - Utilice let y const en lugar de var para evitar acceder a las variables antes de su declaración.
2. - Declare variables y funciones en la parte superior de su alcance para garantizar que su código se comporte de manera predecible.

Resumen de conceptos clave de elevación

• Elevación se refiere al comportamiento de JavaScript de mover declaraciones a la parte superior de su alcance antes de que se ejecute el código.
• Las funciones declaradas con function se muestran con sus definiciones completas, lo que permite utilizarlas antes de declararlas.
• Las variables declaradas con var se elevan con un valor predeterminado de indefinido, mientras que las variables declaradas con let y const permanecen sin inicializar, lo que provoca un error de referencia si se accede a ellas antes de la declaración.
• La zona muerta temporal (TDZ) se aplica a let y const, lo que impide acceder a ellos antes de que se inicialicen.

Al comprender el levantamiento, puede evitar problemas comunes en JavaScript y escribir código más predecible. Con la práctica, estos conceptos se convertirán en algo natural.