Différence entre let, const et var en JavaScript

Scope, hoisting, réassignation — tout comprendre pour choisir le bon mot-clé

8
Sections
15+
Exemples
ES6+
Standard

SECTION 01

var : l'ancienne façon de déclarer

📦 Scope de fonction

var a un scope de fonction (pas de bloc). Elle est « hoistée » en haut de la fonction et initialisée à undefined.

var nom = « Alice »;
var nom = « Bob »; // ✅ Pas d'erreur — redéclaration autoriséeif (true)
console.log(x); // 10 — var IGNORE le bloc if

function test()
console.log(y); // ❌ ReferenceError — var respecte le scope FONCTION

⚠️ var est considéré comme obsolète en JavaScript moderne. Il cause des bugs subtils à cause du scope de fonction et du hoisting. Utilise let ou const à la place.

SECTION 02

let : la déclaration moderne et flexible

🔲 Scope de bloc

let a un scope de bloc (entre ). Elle ne peut pas être redéclarée dans le même scope, mais peut être réassignée.

let age = 25;
age = 26; // ✅ Réassignation OKlet age = 30; // ❌ SyntaxError — redéclaration interdite

if (true)
console.log(x); // ❌ ReferenceError — x n'existe pas ici

// Idéal pour les boucles
for (let i = 0; i < 3; i++)
console.log(i); // ❌ ReferenceError — i n'existe pas ici

SECTION 03

const : la constante

🔒 Pas de réassignation

const a le même scope de bloc que let, mais la variable ne peut pas être réassignée. Elle doit être initialisée à la déclaration.

const PI = 3.14159;
PI = 3; // ❌ TypeError — réassignation interditeconst nom; // ❌ SyntaxError — doit être initialisée

⚠️ const ≠ immuable

Attention : const empêche la réassignation, pas la mutation. Les objets et tableaux déclarés avec const peuvent être modifiés :

const user = ;
user.age = 26; // ✅ Mutation OK — on modifie une propriété
user = ; // ❌ TypeError — on ne peut pas réassignerconst fruits = [« pomme », « banane »];
fruits.push(« orange »); // ✅ Mutation OK
fruits = []; // ❌ TypeError — réassignation interdite

Retiens : const protège la référence (la « boîte »), pas le contenu. Pour rendre un objet vraiment immuable, utilise Object.freeze().

SECTION 04

Tableau comparatif

Critèrevarletconst
ScopeFonctionBloc Bloc
Redéclaration✅ Oui❌ Non❌ Non
Réassignation✅ Oui✅ Oui❌ Non
HoistingOui → undefinedOui → TDZ (erreur)Oui → TDZ (erreur)
Initialisation obligatoire❌ Non❌ Non✅ Oui
Recommandé en 2026❌ Non✅ Quand la valeur change✅ Par défaut

SECTION 05

Le hoisting expliqué

⬆️ Hoisting = déclaration remontée en haut du scope

JavaScript « remonte » les déclarations de variables avant l'exécution. Mais le comportement diffère selon le mot-clé :

// var — hoistée et initialisée à undefined
console.log(a); // undefined (pas d'erreur !)
var a = 10;// let — hoistée mais dans la « Temporal Dead Zone » (TDZ)
console.log(b); // ❌ ReferenceError: Cannot access 'b' before initialization
let b = 20;

// const — même comportement que let (TDZ)
console.log(c); // ❌ ReferenceError
const c = 30;

La Temporal Dead Zone (TDZ) est la période entre le début du bloc et la déclaration de la variable. Avec let et const, accéder à la variable dans cette zone provoque une erreur — c'est un comportement voulu pour éviter les bugs.

SECTION 06

Bonne pratique : const d'abord

🎯 La règle simple
// 1. Utilise const par défaut
const API_URL = « https://api.example.com »;
const user = ;
const items = [1, 2, 3];// 2. Utilise let uniquement quand la valeur change
let compteur = 0;
compteur++;

let resultat = null;
if (condition)

// 3. N'utilise JAMAIS var
// var est obsolète — aucune raison de l'utiliser en code moderne

Résumé : const par défaut → let si tu dois réassigner → var jamais. C'est la convention suivie par la quasi-totalité des projets JavaScript modernes, les linters (ESLint) et les guides de style (Airbnb, Google).

SECTION 07

Erreurs fréquentes

ErreurProblèmeSolution
Utiliser var dans une boucle forLa variable fuit hors du blocUtiliser let
Penser que const rend un objet immuableLes propriétés restent modifiablesconst protège la référence, pas le contenu
Déclarer une const sans valeurSyntaxErrorToujours initialiser : const x = …
Redéclarer une variable avec letSyntaxError dans le même scopeRéassigner (x = newVal) au lieu de redéclarer (let x = …)
Accéder à une variable avant sa déclarationReferenceError (TDZ)Toujours déclarer en haut du bloc

SECTION 08

Questions fréquentes

Pourquoi ne pas utiliser var en 2026 ?
var a un scope de fonction (pas de bloc), est hoistée comme undefined et peut être redéclarée. Ces comportements causent des bugs subtils. let et const (ES6, 2015) corrigent tous ces problèmes et sont supportées partout depuis des années.
Quand utiliser let plutôt que const ?
Quand tu sais que la valeur sera réassignée : compteurs de boucle, accumulateurs, résultats conditionnels. Si la variable ne change jamais de valeur (même si c'est un objet que tu modifies), utilise const.
const rend-il un objet immuable ?
Non. const empêche la réassignation de la variable, pas la mutation de l'objet. const user = puis user.nom = « Alice » est valide. Pour l'immutabilité, utilise Object.freeze() ou une bibliothèque comme Immer.
C'est quoi la Temporal Dead Zone ?
C'est la période entre le début du bloc et la ligne de déclaration d'une variable let/const. Pendant cette zone, la variable existe (elle est hoistée) mais y accéder provoque une ReferenceError. C'est un mécanisme de sécurité pour t'obliger à déclarer avant d'utiliser.

let, const et var en JavaScript — Guide complet

Référence : MDN let · MDN const