Variables JavaScript

Introduction

Une variable est un conteneur nommé pour une valeur. En JavaScript, vous créez des variables pour stocker des données — le nom d'un utilisateur, un total en cours, le résultat d'un calcul — puis vous faites référence à ces données par leur nom plus loin dans votre programme.

Ce guide couvre tout ce dont vous avez besoin pour déclarer des variables avec assurance : les trois mots-clés (let, const et l'ancien var), comment la portée détermine où une variable est visible, ce que le hoisting et la Zone Morte Temporelle (TDZ) signifient en pratique, la différence entre réassigner et muter un const, ainsi que les règles et conventions de nommage suivies par la communauté.

En résumé : utilisez const par défaut, let lorsque vous avez besoin de réassigner, et évitez var dans le code moderne.

Déclarer une Variable

Vous déclarez une variable avec un mot-clé suivi d'un nom, et vous lui assignez optionnellement une valeur avec = :

JavaScript est dynamiquement typé : une variable n'a pas de type fixe, ainsi la même variable peut contenir une string maintenant et un nombre plus tard. (Voir Types de données JavaScript pour les valeurs que les variables peuvent contenir.)

Il existe trois mots-clés de déclaration :

• const — pour les valeurs qui ne seront pas réassignées (votre choix par défaut).
• let — pour les valeurs qui seront réassignées.
• var — le mot-clé d'origine, conservé pour la compatibilité ascendante. Voir L'ancien "var".

Comparaison de let, const et var

L'exemple ci-dessous montre les différences pratiques entre let/const à portée de bloc et var à portée de fonction :

Portée : où vit une Variable

La portée détermine à quel endroit de votre code une variable est accessible. Pour un traitement plus approfondi, voir Portée des variables, fermetures.

Portée de Bloc (let et const)

let et const ne sont visibles qu'à l'intérieur du bloc { ... } où ils sont déclarés — un if, une boucle, ou toute paire d'accolades :

C'est pourquoi let est le bon choix pour les compteurs de boucle : chaque itération d'une boucle for obtient sa propre liaison.

Portée de Fonction (var)

var ignore les blocs. Sa portée est celle de la fonction englobante la plus proche (ou la portée globale si elle est en dehors de toute fonction), ce qui est une source courante de bugs :

Portée Globale

Une variable déclarée en dehors de toute fonction est globale et accessible partout. Dans les navigateurs, un var de niveau supérieur s'attache à l'object global window, tandis que let et const de niveau supérieur ont une portée de script et ne le font pas :

Hoisting et la Zone Morte Temporelle

Le hoisting signifie que les déclarations sont traitées avant l'exécution du code. Les trois mots-clés diffèrent dans leur façon de hisser les déclarations.

Une déclaration var est hissée et initialisée à undefined, donc la lire avant la ligne qui lui assigne une valeur donne undefined plutôt qu'une erreur :

let et const sont également hissés, mais ils ne sont pas initialisés. Du début du bloc jusqu'à la ligne de déclaration, la variable se trouve dans la Zone Morte Temporelle (TDZ) — y accéder lève une ReferenceError :

La TDZ est une fonctionnalité, pas une bizarrerie : elle détecte les utilisations accidentelles avant déclaration que var masque silencieusement.

const : Réassignation vs. Mutation

const empêche la réassignation de la variable — vous ne pouvez pas faire pointer le nom vers une nouvelle valeur. Cela ne rend pas la valeur elle-même immuable. Les objets et les array contenus dans un const peuvent toujours être modifiés :

Utilisez const pour les objets et les array chaque fois que vous ne réassignez pas la liaison — cela documente l'intention et prévient toute une classe de bugs. Si vous avez vraiment besoin d'un object immuable, utilisez Object.freeze().

Règles et Conventions de Nommage

JavaScript impose quelques règles strictes pour les noms de variables :

• Les noms peuvent contenir des lettres, des chiffres, _ (underscore) et $ (signe dollar).
• Les noms ne doivent pas commencer par un chiffre.
• Les noms sont sensibles à la casse — total et Total sont des variables différentes.
• Les mots-clés réservés tels que let, class ou return ne peuvent pas être utilisés.
• Les espaces ne sont pas autorisés.

Au-delà des règles, suivez ces conventions pour un code lisible :

• Utilisez des noms descriptifs : userAge, pas x.
• Utilisez le camelCase pour les variables et les fonctions : firstName, itemCount.
• Utilisez UPPER_SNAKE_CASE pour les constantes fixes : const MAX_SIZE = 100;.
• Évitez les lettres uniques sauf pour les compteurs de boucle de courte durée (i, j).

Résumé

• Utilisez const par défaut, let lorsque vous avez besoin de réassigner, et évitez var dans le nouveau code.
• let et const ont une portée de bloc ; var a une portée de fonction et fuit hors des blocs.
• let/const sont dans la TDZ avant leur déclaration ; var est lu comme undefined.
• const bloque la réassignation, pas la mutation — le contenu des objets et des array peut toujours changer.
• Respectez les règles de nommage (pas de chiffre en début, pas de mots-clés, sensible à la casse) et utilisez le camelCase.

Pour aller plus loin, lisez L'ancien "var" et Portée des variables, fermetures.

Pratique