In JavaScript le variabili possono essere dichiarate in tre differenti modi che, anche se molto simili, presentano differenze importanti riguardo al contesto di utilizzo. Vediamo queste modalità nel dettaglio.

var

for (var i = 0; i <= 3; i++) {
    console.log(i);
}
console.log(i); // 1 2 3 4

Anche se definita nel contesto del ciclo for, la variabile può essere richiamata nell'ultima riga e restituire il valore 4.

Un'altra caratteristica delle variabili è l'hoisting, cioè il sollevamento della dichiarazione delle variabili: prima dell'esecuzione, il codice viene scannerizzato e in memoria viene riservato lo spazio riservato alle variabili.

Per quanto riguarda le varibili dichiarate con var, queste vengono inizializzate con valore undefined, il che fa si che il seguente codice non dia errore.

console.log(helloWorld); // undefined
helloWorld = "Ciao mondo";
var helloWorld;
console.log(helloWorld); // Ciao mondo
var helloWorld;

let

for (let i = 0; i <= 3; i++) {
    console.log(i);
}
console.log(i); // Reference error

Se adattiamo l'esempio precedente, vediamo che al di fuori del for la variabile i non esiste, possiamo creare contesti anche utilizzando le semplici parentesi "{", permettendoci di utilizzare variabili con lo stesso nome ma mantenendo valori differenti.

{
  let name="Morgan";
  console.log(name)} // Morgan
  let name="Fabio"
  console.log(name) // Fabio
}

A differenza di var non viene effettuato alcun hoisting, quindi ogni accesso alla variabile prima della sua dichiarazione restituirà un'errore, così come la ri-dichiarazione della variabile.

helloWorld = "Ciao mondo"; // ReferenceError
let helloWorld; 
let helloWorld; // Identifier 'helloWorld' has already been declared

const

const name = "Morgan";
name = "Fabio"; // TypeError

const arr=[1,2];
console.log(arr) // [1,2]
arr[0]=0;
console.log(arr) // [0,2]