Quelle est la différence entre var, let et const ?

var a une portée de fonction, tandis que let et const ont une portée de bloc. var peut être redéclaré et réaffecté, let peut être réaffecté mais pas redéclaré dans le même scope, et const ne peut ni être redéclaré ni réaffecté. Les variables déclarées avec var sont soulevées (hoisting) avec une initialisation à undefined, tandis que let et const sont aussi soulevées mais restent dans la "zone morte temporaire" jusqu'à leur initialisation.

// var a une portée de fonction
function exempleVar() {
  if (true) {
    var x = 10;
    console.log(x); // 10
  }
  console.log(x); // 10 (x est visible ici)
}

// let et const ont une portée de bloc
function exempleLetConst() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log(y); // 20
    console.log(z); // 30
  }
  // console.log(y); // Erreur ReferenceError: y n'est pas défini
  // console.log(z); // Erreur ReferenceError: z n'est pas défini
}

// var peut être redéclaré et réaffecté
var a = 1;
var a = 2; // Redéclaration
a = 3; // Réaffectation
console.log(a); // 3

// let peut être réaffecté, mais pas redéclaré dans le même scope
let b = 4;
// let b = 5; // Erreur SyntaxError: l'identifiant 'b' a déjà été déclaré
b = 6; // Réaffectation
console.log(b); // 6

// const ne peut ni être réaffecté ni redéclaré
const c = 7;
// const c = 8; // Erreur SyntaxError: l'identifiant 'c' a déjà été déclaré
// c = 9; // Erreur TypeError: Assignation à une variable constante.
console.log(c); // 7 (pour types primitifs)

// Hoisting
console.log(hoistedVar); // undefined (var a été soulevée et initialisée à undefined)
var hoistedVar = "Je suis var";

// console.log(hoistedLet); // Erreur ReferenceError: Impossible d'accéder à 'hoistedLet' avant l'initialisation
// let hoistedLet = "Je suis let"; // En zone morte temporaire

Les différences clés sont résumées dans le tableau :

Caractéristique	var	let	const
Portée	Fonctionnelle	Bloc	Bloc
Redéclaration	Oui	Non (dans le même scope)	Non
Réaffectation	Oui	Oui	Non (pour les primitifs)
Hoisting	Oui (avec undefined)	Oui (zone morte temporaire)	Oui (zone morte temporaire)
Initialisation précoce	Pas requise d'initialisation	Pas requise d'initialisation	Requise d'initialisation

Il est important de noter que pour les objets et tableaux déclarés avec const, la variable elle-même ne peut pas être réaffectée à un autre objet/tableau, mais le contenu de l'objet/tableau peut être modifié.

const monObjet = { clé: 'valeur' };
// monObjet = { nouvelleClé: 'nouvelleValeur' }; // Erreur TypeError: Assignation à une variable constante.
monObjet.clé = 'nouvelleValeur'; // Possible
console.log(monObjet); // { clé: 'nouvelleValeur' }

const monTableau = [1, 2];
// monTableau = [3, 4]; // Erreur TypeError: Assignation à une variable constante.
monTableau.push(3); // Possible
console.log(monTableau); // [ 1, 2, 3 ]