Le mot-clé var en JavaScript

En JavaScript, la façon dont vous créez et utilisez les variables a un impact direct sur le comportement du code. Le mot-clé var a été utilisé pendant des décennies pour déclarer des variables. Depuis qu'ES6 a introduit let et const, var est rarement le bon choix dans du nouveau code — mais vous le rencontrerez encore dans des tutoriels, des questions d'entretien et des projets legacy. Ce chapitre explique exactement comment var fonctionne, pourquoi ses règles de portée et de hoisting surprennent les développeurs, et quand (si jamais) il faut encore l'utiliser aujourd'hui.

Cette page couvre : la portée de var, le hoisting et le piège de undefined, les variables globales accidentelles, la redéclaration, le fameux bug de fermeture dans les boucles, et les alternatives plus sûres avec let/const.

Introduction à la déclaration de variables avec var

Le mot-clé var déclare une variable, en l'initialisant optionnellement à une valeur. Les variables déclarées avec var ont une portée de fonction ou une portée globale (jamais une portée de bloc), et elles sont soumises au hoisting, ce qui peut produire un comportement surprenant pour les développeurs venant d'autres langages. Pour les bases de la déclaration de variables, consultez Variables JavaScript.

Portée de fonction

Une variable déclarée avec var à l'intérieur d'une fonction est locale à cette fonction et accessible partout en son sein. De manière cruciale, var ne respecte pas les limites des blocs : même lorsqu'elle est déclarée à l'intérieur d'un bloc tel qu'une instruction if ou une boucle for, la variable « s'échappe » et est visible dans toute la fonction englobante.

C'est la différence principale avec let et const : avec eux, x n'existerait qu'à l'intérieur du bloc if, et le console.log lèverait une ReferenceError. Consultez Portée des variables pour une vue complète de la portée de bloc.

Hoisting

Le hoisting est le comportement de JavaScript qui traite les déclarations comme si elles étaient déplacées au sommet de leur portée englobante. Pour un var, seule la déclaration est hissée, pas l'assignation — ainsi le nom existe dès le début de la fonction mais vaut undefined jusqu'à ce que l'exécution atteigne la ligne qui lui assigne une valeur.

Lire y avant sa ligne var donne undefined plutôt qu'une ReferenceError. C'est ce qui rend le hoisting de var subtil : le code semble « fonctionner », mais une faute de frappe ou une assignation mal placée peut silencieusement lire undefined.

let et const sont également hissés, mais ils vivent dans la zone morte temporelle jusqu'à ce que leur déclaration soit exécutée. Les lire tôt lève donc une erreur plutôt que de retourner silencieusement undefined — ce qui est généralement le comportement souhaité :

Variables globales et le mot-clé var

Lorsque var est utilisé en dehors de toute fonction, il devient une variable globale accessible de partout. Dans les navigateurs, cela l'attache également comme propriété de l'objet global (window), ce que let et const ne font pas. Le risque : deux scripts qui déclarent tous deux var config se remplaceront silencieusement l'un l'autre.

var globalVar = "I am global";
// In a browser: window.globalVar === "I am global"  → true

let blockGlobal = "scoped";
// window.blockGlobal → undefined (let/const do not become window properties)

Oublier de déclarer une variable (assigner à un nom non déclaré en mode non strict) crée également une variable globale accidentelle — une raison de plus d'utiliser "use strict" et de préférer let/const.

Limitations de var et alternatives modernes

Bien que var ait été un élément fondamental de JavaScript, il présente des limitations qui ont conduit à l'introduction de let et const dans ES6 (ECMAScript 2015), offrant des déclarations de variables à portée de bloc.

Confusion due au hoisting et à la portée

Le comportement de hoisting et la nature à portée de fonction de var peuvent engendrer de la confusion, notamment dans les constructions de boucles ou les blocs conditionnels, où des variables à portée de bloc sont attendues intuitivement.

Redéclaration de var et particularités des fermetures dans les boucles

• Redéclaration : Contrairement à let et const, var permet de redéclarer la même variable dans la même portée sans erreur — une déclaration en double peut ainsi écraser silencieusement une précédente.
• Fermeture dans une boucle : Une variable de boucle var vit dans une seule portée de fonction partagée, donc chaque fermeture créée dans la boucle voit la même variable. Au moment où les callbacks s'exécutent, la boucle est terminée et la variable contient sa valeur finale.

Le bug de fermeture dans les boucles est le piège classique de var. Les trois callbacks partagent le même i :

Remplacer var par let résout le problème : let crée une nouvelle liaison à chaque itération, de sorte que chaque fermeture capture sa propre valeur :

Avant let, la solution de contournement était une IIFE qui capturait la valeur à chaque itération :

Introduction de let et const

Pour atténuer les problèmes liés à var, let et const offrent aux développeurs des variables à portée de bloc, réduisant le risque d'erreurs dues au hoisting et rendant le code plus prévisible et plus facile à déboguer.

Bonnes pratiques pour l'utilisation de var en JavaScript

Malgré ses limitations, var reste une partie du langage JavaScript et peut encore être rencontré, notamment dans du code legacy. Respecter les bonnes pratiques garantit que son utilisation n'affecte pas négativement la fonctionnalité ou la maintenabilité du code.

1. Limiter son utilisation dans le code moderne : Préférez let et const pour les déclarations de variables afin de tirer parti de la portée de bloc et de réduire les problèmes potentiels de hoisting.
2. Comprendre la portée : Lorsque vous travaillez avec var, soyez conscient de sa nature à portée de fonction et planifiez la structure de votre code en conséquence pour éviter les variables globales involontaires.
3. Initialisation à la déclaration : Initialisez les variables var au moment de leur déclaration pour éviter les valeurs undefined dues au hoisting.

Conclusion

Le mot-clé var a longtemps été un pilier de JavaScript. Comprendre ses règles de portée et de hoisting est essentiel pour écrire du code fiable. À mesure que le langage a évolué, let et const ont été introduits pour pallier les limitations de var, rendant le JavaScript moderne plus prévisible. Cependant, comprendre var reste indispensable pour maintenir des bases de code legacy. En suivant les bonnes pratiques et en privilégiant les déclarations à portée de bloc, les développeurs peuvent écrire un JavaScript plus propre et plus maintenable.

Pratique