Home › L’hoisting delle variabili var in JavaScript

L’hoisting delle variabili var in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

L’hoisting delle variabili var in JavaScript consente di utilizzare le variabili prima della loro dichiarazione

Per utilizzare una variabile con var in JavaScript bisogna creare e inizializzare la variabile. Una variabile non ancora inizializzata ha undefined come valore (vedi: Il ciclo di vita delle var in JavaScript). Fin dalla prima versione di JavaScript è possibile utilizzare le variabili prima di dichiarare. Di conseguenza, il seguente codice è del tutto legittimo:

    console.log(myVar); // => undefined
    var myVar = 1;

L’interprete JavaScript è come se traducesse il codice in questo modo:

    var myVar;
    console.log(myVar); // => undefined
    myVar = 1;

La dichiarazione di myVar è stata spostata in cima al codice e dato che, nel ciclo di vita delle variabili dichiarate con var la fase di dichiarazione e inizializzazione avvengono insieme, la variabile assume il valore di undefined fin quando non gli verrà assegnato un valore.

JavaScript effettua l’hoisting solo per la dichiarazione delle variabili e non per l’inizializzazione, avremo quindi che:

    console.log(myVar); // => undefined
    var myVar = 1;
    console.log(myVar); // => 1

Solo var myVar viene spostato in cima dello scope, il suo assegnamento resta nello stesso punto di codice, quindi accendendo alla variabili prima del loro assegnamento ci verrà restituito undefined:

    var myVar;
    console.log(myVar); // => undefined
    myVar = 1;
    console.log(myVar); // => 1

Indice:

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

L’hoisting delle classi in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

L’hoisting per classi non consente di accedere ad una classe prima delle sua dichiarazione a causa della temporal dead zone

Le class, introdotte da ECMAScript 6, cercano di simulare le “classi” di altri linguaggi consentendo di utilizzare super per accedere alle classi padre, definire metodi statici e estendere altre classi. Ecco un esempio di classe:

    class MyClass {
        constructor(name) {
            this.name = name;
        }
        print() {
            console.log(this.name);
        }
    }

    var myClass = new MyClass("Datrevo");
    myClass.print(); // => Datrevo

Leggi altro ›

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

L’hoisting delle costanti in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

Le costanti non sfruttano l’hoisting, per poterle utilizzare bisogna prima dichiararle e poi utilizzarle per non generare errori

In JavaScript è possibile creare ed utilizzare costanti all’interno del blocco scope. Le costanti devono essere dichiarare, inizializzate e assegnate nello stesso momento altrimenti verrebbe generato un errore:

    const MY_CONST; // => SyntaxError: Missing initializer in const declaration

    MY_CONST = 1;
    console.log(MY_CONST);

Leggi altro ›

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

L’hoisting delle variabili let in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

Le variabili let non sfruttano l’hoisting e non possono essere lette prima della loro dichiarazione per la temporal dead zone

In JavaScript, le variabili let sono dichiarate in cima al blocco di istruzioni di cui fanno parte. Accedere prematuramente alle variabili let genera un errore (e non un undefined come accade con le variabili definite con var) in quanto si trovano nella temporal dead zone e non possono ancora essere utilizzare (vedi: Il ciclo di vita di let, const e class in JavaScript).

    console.log(myVar); // => ReferenceError: myVar is not defined
    let myVar;

Leggi altro ›

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

L’hoisting delle funzioni in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

L’hoisting delle funzioni in JavaScript consente di utilizzare le funzioni prima di dichiararle e consente di scrivere codice più leggibile

In JavaScript, grazie all’hoisting è possibile utilizzare una funzione indipendentemente da dove viene definita. Per le funzioni non viene restituito undefined o errori di accesso come per le variabili let (temporal dead zone). Il seguente codice viene correttamente eseguito:

    console.log(myFunction()); // => Datrevo
    function myFunction() {
        return "Datrevo";
    }

Il codice risulta equivalente a:

    function myFunction() {
        return "Datrevo";
    }
    console.log(myFunction()); // => Datrevo

Leggi altro ›

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

L’hoisting in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

L’hoisting consente di utilizzare variabili e funzioni prima della loro dichiarazione

In qualsiasi codice scritto con JavaScript le variabili sono molto utilizzate, per questo motivo è molto importante capire il concetto di hoisting. Per hoisting si intende quel meccanismo che muove la dichiarazione di variabili e funzioni all’interno dello scope della funzione in cui si trovano (o nello scope globale se si trovano in nessuna funzione). Leggi altro ›

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

La Strict mode in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

La strict mode consente di introdurre in JavaScript una serie di limitazioni per ottimizzare il codice ed eliminare dei possibili errori come per il contenuto del riferimento this

La Strict mode, introdotta a partire da ECMAScript 5, consente di utilizzare una variante limitata di JavaScript. Non si tratta di un insieme di istruzioni, ma si tratta principalmente di una serie di regole semantiche per la scrittura del codice. Codice in strict code e codice non in strict mode possono coesistere (retro compatibilità) anche se le fonti di errori possono essere tante.

Leggi altro ›

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

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi