Understanding JavaScript's var, let, and const: Scope and Hoisting

1. L'ancienne méthode : var et ses pièges

Avant 2015 (ES6), var était la seule façon de déclarer des variables en JavaScript. Bien que vous le rencontriez encore dans d'anciennes bases de code, il présente des comportements qui peuvent conduire à des erreurs inattendues. Il est crucial de les comprendre pour savoir pourquoi let et const ont été introduits.

Les deux caractéristiques principales de var sont sa portée de fonction et le hoisting.

Portée (Scope) de var

En JavaScript, la portée définit où une variable est accessible. Contrairement à de nombreux langages où la portée est liée aux blocs de code (comme les boucles for ou les conditions if), les variables déclarées avec var ont une portée qui s'étend à la fonction entière qui les contient, ou au scope global si elles sont déclarées en dehors de toute fonction.

Pour voir concrètement le problème que cela pose, regardez cet extrait vidéo. Il illustre parfaitement comment une variable var "s'échappe" d'une boucle.

Comme vous l'avez vu, i est toujours accessible après la fin de la boucle. Cela peut écraser d'autres variables et créer des bugs difficiles à tracer, un problème que let résout, comme nous le verrons.

Hoisting de var

Le "hoisting" (ou "remontée") est un mécanisme de JavaScript où les déclarations de variables et de fonctions sont déplacées au sommet de leur portée avant l'exécution du code.

Avec var, la variable est "remontée" et initialisée avec la valeur undefined. Cela signifie que vous pouvez utiliser une variable avant sa déclaration textuelle dans le code sans provoquer d'erreur, mais vous obtiendrez undefined.

console.log(myVar); // Affiche undefined, pas d'erreur
var myVar = 10;
console.log(myVar); // Affiche 10

Le moteur JavaScript interprète ce code comme suit :

var myVar; // Déclaration remontée et initialisée à undefined
console.log(myVar);
myVar = 10; // Assignation
console.log(myVar);

Pour une explication plus visuelle et technique de ce processus, la vidéo suivante est excellente. Elle décompose le contexte d'exécution de JavaScript en phase de création et phase d'exécution.

2. La méthode moderne : let et const

Pour résoudre les problèmes de var, ES6 a introduit let et const. Ils sont devenus le standard pour la déclaration de variables en JavaScript moderne.

Leur principale innovation est la portée de bloc (block scope).

Un bloc est simplement un morceau de code délimité par des accolades { }. Cela inclut les boucles for, les conditions if/else, ou même de simples accolades placées n'importe où dans le code.

if (true) {
  // Ceci est un bloc
  let message = "Hello";
  console.log(message); // "Hello"
}

// console.log(message); // Erreur: message is not defined

Pour approfondir les caractéristiques de let et const, l'article suivant de freeCodeCamp est une excellente lecture.

Hoisting de let et const : La Zone Morte Temporelle (TDZ)

Une question fréquente est : "Est-ce que let et const sont hoistés ?". La réponse est oui, mais d'une manière différente et plus sûre que var.

Les variables let et const sont bien "remontées" au début de leur bloc, mais elles ne sont pas initialisées. Elles entrent dans ce qu'on appelle la Zone Morte Temporelle (Temporal Dead Zone, ou TDZ). Toute tentative d'accéder à la variable dans la TDZ (avant sa déclaration dans le code) résulte en une ReferenceError.

// Début de la TDZ pour myLet
// console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization

let myLet = 20; // Fin de la TDZ pour myLet
console.log(myLet); // 20

Ce comportement est une sécurité : il vous empêche d'utiliser une variable avant qu'elle n'ait été correctement déclarée et initialisée, évitant ainsi les bugs liés à l'utilisation de valeurs undefined inattendues.

La vidéo suivante illustre parfaitement cette différence de hoisting et le concept de TDZ.

3. Résumé et bonnes pratiques

Pour synthétiser, voici un tableau récapitulatif des différences clés.

Voici les bonnes pratiques à adopter dans votre code :

1. N'utilisez plus var. Préférez systématiquement let et const pour éviter les comportements inattendus liés à la portée et au hoisting.
2. Utilisez const par défaut. Cela rend votre code plus prévisible. Une variable déclarée avec const ne peut pas être réassignée.
3. Utilisez let uniquement lorsque vous savez que la valeur de la variable doit changer. C'est typiquement le cas pour les compteurs de boucle ou les variables qui suivent un état qui évolue.

Une note importante sur const avec les objets et les tableaux : const garantit que la référence à l'objet ou au tableau ne changera pas. Cependant, le contenu de l'objet ou du tableau (ses propriétés ou ses éléments) reste modifiable.

const user = { name: "Alex" };
user.name = "John"; // Ceci est autorisé
console.log(user.name); // "John"

// user = { name: "Marie" }; // Erreur: Assignment to constant variable.

Conclusion

Félicitations pour avoir terminé cette première leçon ! Vous avez maintenant une compréhension solide des différences fondamentales entre var, let et const.

Points clés à retenir :

• Portée (Scope) : var a une portée de fonction, tandis que let et const ont une portée de bloc { }, ce qui est plus prévisible.
• Hoisting : Les variables var sont remontées et initialisées à undefined. Les variables let et const sont remontées mais restent dans la "Zone Morte Temporelle" (TDZ) jusqu'à leur déclaration, provoquant une erreur si on y accède trop tôt.
• Assignation : let permet de mettre à jour la valeur, const ne le permet pas (la variable est en "lecture seule").

L'utilisation systématique de let et const est une des premières étapes pour écrire un code JavaScript moderne, robuste et de qualité professionnelle.

Dans la prochaine leçon, nous continuerons à explorer la syntaxe moderne de JavaScript en nous penchant sur les fonctions fléchées, la déstructuration, et les opérateurs spread/rest. Ces outils vous permettront d'écrire un code encore plus concis et expressif.