L’hoisting in JavaScript

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).

Per utilizzare una variabile in JavaScript si devono seguire 3 passi (Il ciclo di vita delle var in JavaScript):

  • Dichiarare la variabile (ad es. var myVar);
  • Inizializzare la variabile (myVar = 1;);
  • Usare la variabile (console.log(myVar));

JavaScript offre grande flessibilità e non è necessario seguire in successione questi passi, è possibile usare una variabile prima di dichiararla. Questa caratteristica è possibile grazie all’hoisting delle variabili.

Ad esempio, è possibile utilizzare una funzione solo dopo averla dichiarata:

    console.log(myFunction()); // => Datrevo

    function myFunction() {
        return 'Datrevo';
    }

Con l’hoisting tutte le dichiarazioni variabili e le funzioni vengono spostate in cima al proprio codice. Nel nostro esempio, pur definendo la funzione myFunction() successivamente, quando il codice verràeseguito la funzione viene spostata in cima al codice. Quando verrà eseguito il console.log() la funzione è stata già definita e inizializzata, è quindi possibile utilizzarla a tutti gli effetti.

L’hoisting influisce su:

  • Dichiarazione di variabili (var, let e const);
  • Dichiarazione di funzioni (function () {});
  • Dichiarazioni di classi (class {}).

Le linee guida consigliano di seguire sempre queste regole per evitare valori inaspettati (undefined) durante l’esecuzione del codice. I passi da seguire sono: dichiara, inizializza ed infine usa. ECMAScript 6 obbliga a seguire questi passi tramite i nuovi costrutti let, const e class. Il mancato rispetto di questa linea guida causa errori.

Per approfondire ecco l’indica degli articoli sull’hoisting:

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

Lascia un commento

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

*