Cos’è lo scope in JavaScript

Per scope si intende l’ambito di valità di una variabile e dove il suo valore è accessibile, globalmente o localmente

In JavaScript per scope di una variabile si intende l’ambito di validità della variabile stessa. Il concetto di scope può essere suddiviso in:

  • scope globale: accessibilità estesa all’intero script;
  • scope locale: accessibilità ristretta al solo codice di una funzione o di un blocco di codice.

Per scope globale si intende l’ambito di validità di tutto lo script, ad esempio:

    var global = 10;
    var myFunction = function () {
        console.log(global); // => Print 10
    }
    myFunction();

La variabile globale viene dichiarata all’esterno della funzione, di conseguenza lo scope della variabile è globale in quanto viene aggiunto all’oggetto window ed è accessibile anche all’interno della funziona dichiarata.

    var global = 10;
    var myFunction = function () {
        console.log(window.global); // => Print 10
    }
    myFunction();

Per scope locale si intende solo l’ambito di validità della funzione

    var myFunction = function () {
        if (true) {
            var local = 100;
        }
        console.log(local); // => Print 100
    }
    myFunction();
    console.log(local); // => Uncaught ReferenceError: local is not defined

In altri linguaggi, come Java, lo scope è definito da un qualsiasi blocco di istruzioni delimitato dalla coppia di parentesi graffe. In JavaScript, non esiste il concetto di scope di blocco (eccezione per let introdotta in ES6), anche se si dichiara una variabile all’interno di un blocco delimitato dalle parentesi graffe, è come si spostasse la dichiarazione all’inizio della funzione in cui la variabile è dichiarata (vedi hoisting).

    var myFunction = function () {
        if (true) {
            var local = 100;
        }
        console.log(local); // => Print 100
    }
    myFunction();

Eseguendo l’esempio, console verrà visualizzato il valore 10 della variabile local. Seppur dichiarando la variabile all’interno del blocco if, la sua dichiarazione verrà spostata all’inizio della funzione myFunction, di conseguenza nell’if la variabile local sarà semplicemente valorizzata al valore 100.

Ricordiamo che dichiarare una funzione senza la clausola var significa dichiarare le variabile a livello globale:

    var myFunction = function () {
        local = 100;
        console.log(local); // => Print 100
    }
    myFunction();
    console.log(local); // => Print 100

Infine, come anticipato, con let (per approfondire: L’hoisting delle variabili let in JavaScript), lo scope di una variabile è dato dal blocco di codice in cui viene definita:

    var myFunction = function () {
        let local = 100;
        var local2 = 200;
        if(true) {
            let local = 101;
            var local2 = 201;
            console.log(local); // => Print 101
            console.log(local2); // => Print 201
        }
        console.log(local); // => Print 100
        console.log(local2); // => Print 201
    }
    myFunction();


Nell’esempio la variabile let definita nell’if ha come ambito di validità solo il blocco di istruzioni racchiuse nell’if. Il valore di local all’interno dell’if diventa 101, ma al di fuori di esso resta 100. Al contrario, il valore della variabile local2 venendo cambiato nell’if, all’esterno contiene il nuovo valore. Il motivo di tutto ciò è dovuto al meccanismo dell’hoisting, le variabili let si trovano nella temporal dead zone in quanto vengono separate la fase di dichiarazione e inizializzazione (differente dall’assegnazione). Per approfondire vedi:Il ciclo di vita delle variabili, funzioni e classi in JavaScript.

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

Lascia un commento

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

*