Qual è la differenza tra var, let e const?

var ha un ambito di funzione, mentre let e const hanno un ambito di blocco. var può essere ridichiarato e riassegnato, let può essere riassegnato ma non ridichiarato nello stesso ambito, e const non può essere né ridichiarato né riassegnato. Le variabili dichiarate con var sono soggette a hoisting con un'inizializzazione a undefined, mentre let e const sono anch'esse soggette a hoisting ma rimangono nella "zona morta temporanea" fino alla loro inizializzazione.

// var ha ambito di funzione
function esempioVar() {
  if (true) {
    var x = 10;
    console.log(x); // 10
  }
  console.log(x); // 10 (x è visibile qui)
}

// let e const hanno ambito di blocco
function esempioLetConst() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log(y); // 20
    console.log(z); // 30
  }
  // console.log(y); // Errore ReferenceError: y non è definito
  // console.log(z); // Errore ReferenceError: z non è definito
}

// var può essere ridichiarato e riassegnato
var a = 1;
var a = 2; // Ridichiarazione
a = 3; // Riassegnazione
console.log(a); // 3

// let può essere riassegnato, ma non ridichiarato nello stesso scope
let b = 4;
// let b = 5; // Errore SyntaxError: identificatore 'b' già dichiarato
b = 6; // Riassegnazione
console.log(b); // 6

// const non può essere riassegnato né ridichiarato
const c = 7;
// const c = 8; // Errore SyntaxError: identificatore 'c' già dichiarato
// c = 9; // Errore TypeError: Assegnazione a variabile costante
console.log(c); // 7 (per tipi primitivi)

// Hoisting
console.log(hoistedVar); // undefined (var è stato elevato e inizializzato a undefined)
var hoistedVar = "Io sono var";

// console.log(hoistedLet); // Errore ReferenceError: impossibile accedere a 'hoistedLet' prima dell'inizializzazione
// let hoistedLet = "Io sono let"; // È nella zona morta temporanea

Le differenze chiave sono riassunte nella tabella:

Caratteristica	var	let	const
Ambito	Funzionale	Di blocco	Di blocco
Ridichiarazione	Sì	No (nello stesso scope)	No
Riassegnazione	Sì	Sì	No (per tipi primitivi)
Hoisting	Sì (con undefined)	Sì (zona morta temporanea)	Sì (zona morta temporanea)
Inizializzazione precoce	Non richiesta	Non richiesta	Richiede inizializzazione

È importante notare che per oggetti e array dichiarati con const, la variabile stessa non può essere riassegnata a un altro oggetto/array, ma il contenuto dell'oggetto/array può essere modificato.

const mioOggetto = { chiave: 'valore' };
// mioOggetto = { nuovaChiave: 'nuovoValore' }; // Errore TypeError: Assegnazione a variabile costante
mioOggetto.chiave = 'nuovoValore'; // Possibile
console.log(mioOggetto); // { chiave: 'nuovoValore' }

const mioArray = [1, 2];
// mioArray = [3, 4]; // Errore TypeError: Assegnazione a variabile costante
mioArray.push(3); // Possibile
console.log(mioArray); // [ 1, 2, 3 ]