Come si definiscono le variabili in Javascript
Prima di paralre di come si definiscono le variabili in Javascript, rispondiamo alla domanda, “Cos’è una variabile?”. Una variabile è un contenitore di dati. Quando dobbiamo gestire un certo dato nel nostro software, lo assegniamo ad una variabile che ne conterrà appunto il valore. E ogni volta che dovremo riferici a questo dato, useremo il nome della variabile.
Ci sono vari modi per definire una variabile in Javascript. Vediamo quali.
1) Var
La classica variabile in Javascript viene definita con lo statement var.
Esempio:
var myVariable = 5;Le principali caratteristiche di una variabile definita con var sono:
- è mutabile
- è una variabile globale, ovvero sarà accessibile in tutto il file Javascript in cui è definita
Il fatto che sia mutabile vuol dire che se definiamo la variabile e le assegniamo il valore 5, possiamo successivamente assegnarle un altro valore, ad esempio “red”.
var myVariabile = 5;
myVariable = "red";Il fatto che il suo scope (ambito) sia globale implica che è possibile leggere il valore della variabile all’interno di una funzione e anche modificarlo. Vediamo con un esempio.
Nota: il codice sotto riportato è presente al link https://github.com/nerdityourself/javascript_tutorial.git nella cartella 02.
Codice HTML (da copiare in un file index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript Course</title>
<script src="script.js" async></script>
</head>
<body>
<h1>Esempio variabili</h1>
</body>
</html>
Codice Javascript (da copiare in un file script.js)
var myVariable = 5;
function example()
{
myVariable = 8;
}
example();Se aprite il file index.html in un browser e quindi aprite la Console e qui digitate il nome della variabile myVariable, vedrete che verrà indicato il valore 8. myVariable è stata modificata dalla chiamata alla funzione example(). Se commentate nel file script.js la riga example(); e aggiorante la pagina nel vostro browser, digitando nella console myVariable avrete questa volta il suo valore iniziale 5.
A causa del suo ambito globale, la definizione di una variabile con var può non essere la scelta giusta in molti casi. Ad esempio quando si ha a che fare con codici molto estesi, si potrebbe involontariamente modificare il valore della variabile in un punto non desiderato.
Vediamo questo esempio (index_2.html contenuto nella cartella 02)
Codice HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript Course</title>
<script src="script.js" async></script>
</head>
<body>
<h1>Esempio variabili</h1>
<p id="first-p">Colore rosso</p>
<p id="second-p">Colore blue</p>
</body>
</html>Codice Javascript
var color = "blue";
function changeColor()
{
color = "red";
document.querySelector("#first-p").style.color = color;
}
changeColor();
document.querySelector("#second-p").style.color = color;Supponiamo che il nostro obiettivo fosse quello di avere il paragrafo identificato dall’id “first-p” colorato di rosso, e il paragrafo “second-p” colorato di blue.
Dentro la funzione changeColor() però abbiamo assegnato color = “red”. Essendo color definita con var, ed avedo quindi scope globale, l’assegnazione color=”red” non vale solo all’interno della funzione. Ma avrà cambiato il valore della variabile dal punto in cui viene chiamata la funzione in poi.
Se aprite il file html in un browser, vedrete che entrambi i paragrafi sono di colore rosso.
Per poter assegnare una variabile color all’interno della funzione changeColor(), senza andare a modificare l’altra e senza alterare il comportamento della pagina, possiamo definire la variabile con let.
2) Let
Una variabile definita con let è:
- mutabile
- variabile locale nello scope in cui è definita
let myVariable = 5;
Definire le variabili con let, ci permette di evitare problemi come quello descritto sopra.
Ad esempio, cambiamo il codice Javascript precedente in questo modo.
var color = "blue";
function changeColor()
{
let color = "red";
document.querySelector(".first-p").style.color = color;
}
changeColor();
document.querySelector(".second-p").style.color = color;Defininendo la variabile color dentro changeColor con let, abbiamo creato una nuova variabile locale, esistente solo all’interno della funzione changeColor(). In questo modo non siamo andati ad alterare la variabile color definita a riga 1 e il comportamento è quello desiderato: un paragrafo rosso e l’altro blu.
3) Const
Una costante definita con const è
- immutabile
- variabile locale nello scope in cui è definita
const myConst = 5;Quindi è come la variabile let, per quando riguarda il suo scope, ma appunto è costante. Una volta assegnato un valore questo non può essere cambiato.
Se, una volta definito cont myConst = 5, provassimo a fare
myConst = 10;
Nella console del browser vedremo l’errore Uncaught TypeError: Assignment to constant variable.
Nota relativa all’assegnazione di un oggetto ad una const. (Degli oggetti parleremo in un articolo successivo del corso)
Supponiamo di avere
const myConstObj = {
name: "NerdItYourself",
number: 2
}ovvero abbiamo assegnato a myConstObj un oggetto che ha le proprietà name e number. Aver definito myConstObj con const fa si che non si possa assegnare a myConstObj un altro oggetto o un altro valore. Ad esempio non possiamo fare
myConstObj = 5;
Ma è possibile modificare il valore delle proprietà dell’oggetto assegnato alla const. Ad esempio è possibile fare:
myConstObj.number = 4;