Declaración de variables en JavaScript con let

Resumen: en este tutorial, aprenderás a usar la palabra clave let de JavaScript para declarar variables de ámbito de bloque.

Introducción a la palabra clave let de JavaScript

En ES5, cuando declaras una variable con la palabra clave var, el alcance de la variable es global o local. Si declaras una variable fuera de una función, el alcance de la variable es global. Cuando declaras una variable dentro de una función, el alcance de la variable es local.

ES6 proporciona una nueva forma de declarar una variable usando la palabra clave let. La palabra clave let es similar a la palabra clave var, excepto que estas variables tienen un alcance bloque. Por ejemplo:
let variable_name;

En JavaScript, los bloques se indican con llaves {} , por ejemplo, dentro de un if else, for, do while, while, try catch, etc.

if(condition) {
   // inside a block
}

Veamos el siguiente ejemplo:

let x = 10;
if (x == 10) {
    let x = 20;
    console.log(x); // 20:  referencia dentro del bloque
}
console.log(x); // 10: referencia al principio del script

Cómo funciona el script:

• Primero, declare una variable x e inicialice su valor en 10.
• Segundo, declare una nueva variable con el mismo nombre x dentro del bloque if pero con un valor inicial de 20.
• Tercero, se imprime el valor de la variable x dentro y después del bloque if.

Debido a que la palabra clave let declara una variable de ámbito de bloque, la variable x dentro del bloque if es una nueva variable y sombrea la variable x declarada en la parte superior del script. Por tanto, el valor de x en la consola es 20.

Cuando el motor de JavaScript completa la ejecución del bloque if, la variable x que está dentro del bloque if está fuera del alcance. Por lo tanto, el valor de la variable x que sigue al bloque if es 10.

Variables let de JavaScript y objeto global

Cuando declaras una variable global usando la palabra clave var, agrega esa variable a la lista de propiedades del objeto global. En el caso del navegador web, el objeto global es la ventana. Por ejemplo:

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

Sin embargo, cuando usas la palabra clave let para declarar una variable, esa variable no se adjunta al objeto global como una propiedad. Por ejemplo:

let b = 20;
console.log(window.b); // undefined

Función de devolución de llamada y let de JavaScript en un bucle for

Veamos el siguiente ejemplo.

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

La intención del código es enviar números del 0 al 4 a la consola cada segundo. Sin embargo, genera el número 5 cinco veces:

5
5
5
5
5

En este ejemplo, la variable i es una variable global. Después del ciclo, su valor es 5. Cuando las funciones de devolución de llamada se pasan a la ejecución de la función setTimeout(), hacen referencia a la misma variable i con el valor 5.

En ES5, puedes solucionar este problema creando otro alcance para que cada función de devolución de llamada haga referencia a una nueva variable. Y para crear un nuevo alcance, necesita crear una función. Por lo general, utiliza el patrón IIFE de la siguiente manera:

for (var i = 0; i < 5; i++) {
    (function (j) {
        setTimeout(function () {
            console.log(j);
        }, 1000);
    })(i);
}

Resultado:

0
1
2
3
4

En ES6, la palabra clave let declara una nueva variable en cada iteración del bucle. Por lo tanto, solo se necesita reemplazar la palabra clave var con la palabra clave let para solucionar el problema:

for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

Para hacer que el código sea completamente de estilo ES6, puede usar una función de flecha de la siguiente manera:

for (let i = 0; i < 5; i++) {
    setTimeout(() => console.log(i), 1000);
}

"Ten en cuenta que aprenderá más sobre las funciones de flecha en tutoriales posteriores."

Redeclaración

La palabra clave var permite volver a declarar una variable sin ningún problema:

var counter = 0;
var counter;
console.log(counter); // 0

Sin embargo, volver a declarar una variable con la palabra clave let generará un error:

let counter = 0;
let counter;
console.log(counter);

Aquí está el mensaje de error:

Uncaught SyntaxError: Identifier 'counter' has already been declared

Variables let y elevación en JavaScript

Examinemos el siguiente ejemplo:

{
    console.log(counter); //
    let counter = 10;    
}

Este código provoca un error:

Uncaught ReferenceError: Cannot access 'counter' before initialization

En este ejemplo, acceder a la variable counter antes de declararla provoca un error de referencia. Puedes pensar que una declaración de variable que usa la palabra clave let no se eleva, pero lo hace.

De hecho, el motor de JavaScript elevará una variable declarada por la palabra clave let a la parte superior del bloque. Sin embargo, el motor de JavaScript no inicializa la variable. Por lo tanto, cuando haces referencia a una variable no inicializada, obtendrás un ReferenceError.

Zona de muerte temporal (TDZ)

Una variable declarada por la palabra clave let tiene una llamada zona muerta temporal (TDZ). El TDZ es el tiempo desde el inicio del bloque hasta que se procesa la declaración de la variable.

El siguiente ejemplo ilustra que la zona muerta temporal se basa en el tiempo, no en la ubicación.

{ // ingresar nuevo alcance, TDZ inicia
    let log = function () {
        console.log(message); // mensaje declarado más adelante
    };

    // Este es el TDZ y el registro de acceso
     // causaría un error de referencia
    let message= 'Hello'; // TDZ termina
    log(); // llamado afuera TDZ
}

En este ejemplo:

En primer lugar, la llave inicia un nuevo ámbito de bloque, por lo tanto, se inicia la TDZ.

En segundo lugar, la expresión de la función log() accede a la variable del mensaje. Sin embargo, la función log() aún no se ha ejecutado.

Tercero, declara la variable message e inicialice su valor en 'Hello'. El tiempo desde el inicio del alcance del bloque hasta el momento en que se accede a la variable message se denomina zona muerta temporal. Cuando el motor de JavaScript procesa la declaración, finaliza la TDZ.

Finalmente, llama a la función log() que accede a la variable message fuera de la TDZ.

Ten en cuenta que, si accedes a una variable declarada por la palabra clave let en TDZ, obtendrás un ReferenceError como se ilustra en el siguiente ejemplo.

{ // TDZ starts
    console.log(typeof myVar); // undefined
    console.log(typeof message); // ReferenceError
    let message; // TDZ ends
}

Ten en cuenta que la variable myVar es una variable inexistente, por lo tanto, su tipo no está definido.

La zona de muerte temporal impide hacer referencia accidentalmente a una variable antes de su declaración.

Resumen:

• Las variables que se declaran con la palabra clave let tienen un alcance de bloque, no se inicializan en ningún valor y no se adjuntan al objeto global.
• Volver a declarar una variable con la palabra clave let provocará un error.
• Una zona muerta temporal de una variable declarada usando la palabra clave let comienza desde el bloque hasta que se evalúa la inicialización.