Ambienti JavaScript: cosa sono e come funzionano

Ambiente JavaScript
Ambienti Javascript

Ambienti Javascript: che cosa sono? In Javascript si parla spesso di scope. Con questo termine ci si riferisce ad un ambiente dove operano le variabili. Gli ambienti si distinguono in:

  • Globale: Quando parliamo di tutta l’area in cui scriviamo
  • Locale: È un ambiente chiuso all’interno di istruzioni, funzioni ecc.

Per esempio in questo caso:

 <!DOCTYPE html>
 <html>
        <head>
               <title>Page Title</title>
        </head>
        <body>
     <script>
         //scope globale
         alert('Ciao');
  
     //scope locale
     if (true) {
         var x = 10
         let y = 5
         console.log(x)
         console.log(y)
     }
 
     </script>
        </body>
 </html> 

Ciò che è segnato in rosso è definito ambiente locale, mentre il resto di ciò che all’interno del tag <script> si trova all’interno dell’ambiente globale. Ci è utile conoscere questa distinzione perché ci sono due altri tipi di variabili oltre a var: let e const

Dato che gli ultimi due tipi funzionano allo stesso modo, vediamo da cosa differiscono con var. Quest’ultima variabile funziona a livello globale. Significa che posso richiamarla in qualsiasi punto dell’ambiente JavaScript.

console.log(x) //10

let, invece, funziona a livello locale. Significa che non posso richiamarla fuori dall’area if. Peciò se fuori dall’area evidenziata in rosso riaprissi la console per y, non funzionerà: mi darà errore perché non troverà nessuna variabile y a livello globale; questo problema non si pone se apro la console per x.

console.log(y)  //error

Ambienti Javascript: differenza tra var, let e const

Come abbiamo visto, var può essere usato a livello globale. Questo però significa che se abbiamo:

var x = 5
funcion () {
  var x = 3
  console.log(x) //3
}
console.log(x) //3

La variabile inserita all’interno della funzione sovrascriverà quella che si trova fuori dalla funzione e x sarà sempre uguale a 3.

let funziona a livello locale. Quindi se abbiamo:

let x = 5;
funcion () {
  let x = 3
  console.log(x) //3
};
console.log(x); //5

In questo caso x sarà uguale a 3 all’interno della funzione, ma all’esterno sarà uguale a 5.

Che dire di const? Questa variabile funziona quasi come let ma con la differenza che stabilita una variabile non la possiamo cambiare.

const x =3;
x = 4; //darà errore
let y =4;
y =5; //y sarà uguale a 5

Le const vengono assegnate in fase di dichiarazione

const x = 3; 

Si può scrivere. Ma non possiamo scrivere:

const x;
x = 3; //darà errore

Se invece creiamo un oggetto, possiamo modificarne le proprietà solo in questo modo:

const user = {nome: Angelo, anni: 40};
user.nome = "Giuseppe";

Nel caso di un array, si fa così:

const nomi = ["Angelo", "Giuseppe", "Marco"];
nomi[0] = "Carlo"; //al posto di Angelo darà "Carlo"
for (var i = 0; i < 3; i++) {
   document.write(nomi[i] + "<br>");
 } //Carlo, Giuseppe, Marco
nomi.push("Filippo") //Errore

Quindi possiamo cambiare un valore ma non aggiungerlo.