Il ciclo di vita di let, const e class in JavaScript

Le varibili let, le costanti e le classi utilizzano la temporal dead zone nel proprio ciclo di vita per obbligare i programmatori a scrivere codice pulito, ottimizzato e evitare possibili errori

Le variabili let, introdotte da ECMAScript 2015 (ES6), vengono utilizzate per dichiarare delle variabili ma la loro principale differenza con le variabili var è che separano tutte le fasi del ciclo di vita. Se si tenta di accedere ad una variabile definita con let che ha effettuato solo la fase di inizializzazione causa un errore (ReferenceError: variable is not defined) in quanto si trova nella cosiddetta temporal dead zone.

Ciclo di vita delle let JavaScript

Vediamo un esempio:

    // console.log(myLet); // => Throws ReferenceError
    let myLet;

Avremo un errore in quanto per le let non si applica l’hoisting. Una variabile let può essere letta o modificata solo dopo la fase di inizializzazione (let myLet):

    let myLet;
    console.log(myLet); // => undefined

Per far eseguire le tre le fasi scriveremo:

    let myLet;
    console.log(myLet); // => undefined
    myLet = 5;
    console.log(myLet); // => 5

Qualora l’assegnamento della variabile avvenga durante la sua dichiarazione, le fasi avvengono tutte insieme.

    let myLet = 5;
    console.log(myLet); // => 5

Inoltre, le variabili let si applicano ai blocchi, ad esempio:

    var myVar = 1;;
    if (true) {
        console.log(myVar); // => ReferenceError: myVar is not defined
        let myVar = 2;
        console.log(myVar); // => 2

    }
    console.log(myVar); // => 1

Quando l’interprete JavaScript entra nel blocco if, la variabile myVar passa istantaneamente la fase di dichiarazione a causa di let e non è più possibile accedere alla variabile esterna myVar (cercando di accedervi avremo un errore). Una volta usciti dal blocco if il valore di myVar punta di nuovo a quello precedente dato che let si applica al blocco con le parentesi graffe.

Uno dei grandi vantaggi delle variabili definite con let è che consentono di mantenerle nascoste il più possibile e di modularizzare il codice.

I tipi const e class hanno lo stesso ciclo di vita di let, per quest’ultime però, l’assegnazione può avvenire un’unica volta. Vedi come si comporta l’hoisting delle costanti e delle classi.

Per approfondire:

Pubblicato in Front-end, JavaScript Taggato con: , , , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*