Vous débutez en JavaScript et le mot « variable » vous semble un peu flou ? Vous confondez `let`, `const` et `var` et ne savez pas lequel choisir ? Vous cherchez des explications simples pour enfin comprendre comment ça marche ?
Ce guide va droit au but. On va voir ensemble ce qu’est une variable, comment la déclarer et l’utiliser correctement. Vous trouverez ici des exemples de code clairs pour maîtriser ce concept fondamental en JavaScript et écrire du code plus propre et sans erreurs.
Qu’est-ce qu’une variable en JavaScript ?
Imaginez une variable comme une boîte nommée. C’est un conteneur qui vous permet de stocker une donnée, comme un nombre, un texte ou un objet. L’intérêt est de pouvoir donner un nom à cette information pour la réutiliser plus tard dans votre code, sans avoir à la réécrire à chaque fois.
Quand vous créez une variable, vous demandez à JavaScript de réserver un petit espace en mémoire. Vous lui donnez un nom (une étiquette sur la boîte) et vous pouvez y mettre une valeur. Par la suite, il suffit d’utiliser ce nom pour accéder à la valeur qui est dedans.
// 1. Déclaration : on crée une boîte nommée 'score'
let score;
// 2. Assignation : on met la valeur 100 dans la boîte
score = 100;
// 3. Utilisation : on affiche le contenu de la boîte
console.log(score); // Affiche 100 dans la console
// On peut aussi changer sa valeur
score = 150;
console.log(score); // Affiche 150Les 3 mots-clés pour déclarer une variable : `let`, `const` et `var`
Pour déclarer une variable en JavaScript, vous devez utiliser un mot-clé. Avant 2015 (la mise à jour ES6), il n’y avait que `var`. Aujourd’hui, on utilise principalement `let` et `const`, qui sont considérés comme le standard moderne. Le mot-clé `var` est l’ancienne méthode, et on verra pourquoi il faut l’éviter.
`let` : la déclaration de variable standard
Le mot-clé `let` vous permet de déclarer une variable dont la valeur peut être modifiée plus tard dans le code. C’est le choix le plus courant pour des données qui sont amenées à changer, comme un score de jeu, un compteur ou le nom d’un utilisateur connecté.
- Déclaration et assignation : Vous pouvez déclarer la variable et lui assigner une valeur sur la même ligne ou séparément.
- Ré-assignation : Vous pouvez changer sa valeur autant de fois que vous le voulez.
// Déclaration d'une variable 'age' avec let
let age = 30;
console.log(age); // Affiche 30
// La valeur peut être changée (ré-assignation)
age = 31;
console.log(age); // Affiche 31`const` : la déclaration de constante
Le mot-clé `const` est utilisé pour déclarer une constante. C’est une variable dont la valeur ne peut pas être ré-assignée après sa première initialisation. Vous devez obligatoirement lui donner une valeur au moment de sa création.
Utilisez `const` pour des valeurs qui ne sont pas censées changer, comme une date de naissance, la valeur de PI, ou la configuration d’une application. Cela rend votre code plus sûr et plus facile à comprendre.
const birthYear = 1990;
console.log(birthYear); // Affiche 1990
// Essayer de ré-assigner une constante génère une erreur
// birthYear = 1991; // TypeError: Assignment to constant variable.
// Exemple avec un objet
const user = {
name: 'John',
age: 25
};
// On peut modifier une propriété de l'objet
user.age = 26;
console.log(user.age); // Affiche 26. Ça fonctionne !
// Mais on ne peut pas ré-assigner l'objet lui-même
// user = { name: 'Jane', age: 22 }; // TypeError`var` : l’ancienne méthode (à éviter)
Le mot-clé `var` était la seule façon de déclarer des variables avant ES6. Aujourd’hui, son utilisation est fortement déconseillée dans le code moderne. La raison principale est sa gestion de la « portée » (scope), qui peut causer des bugs difficiles à repérer. Contrairement à `let` et `const`, `var` n’a pas de portée de bloc, mais une portée de fonction.
On en parlera plus en détail dans la section sur le scope, mais la règle simple à retenir est : n’utilisez plus `var`. Préférez toujours `let` ou `const`.
Tableau comparatif : `let` vs `const` vs `var`
Pour résumer les différences, voici un tableau qui compare les trois mots-clés sur les points essentiels. C’est le meilleur moyen de visualiser rapidement lequel utiliser.
| Caractéristique | let |
const |
var |
|---|---|---|---|
| Portée (Scope) | Bloc `{}` | Bloc `{}` | Fonction |
| Ré-assignation | ✅ Oui | ❌ Non | ✅ Oui |
| Re-déclaration | ❌ Non | ❌ Non | ✅ Oui (source de bugs) |
| Hoisting (Levage) | Oui (Zone Morte Temporelle) | Oui (Zone Morte Temporelle) | Oui (initialisée à `undefined`) |
Les règles de nommage d’une variable (Naming Conventions)
Vous ne pouvez pas nommer une variable javascript n’importe comment. Il y a des règles techniques à respecter et des conventions à suivre pour que votre code reste lisible pour vous et pour les autres développeurs.
- Un nom de variable doit commencer par une lettre, un tiret bas `_` ou un symbole dollar `$`.
- Il ne peut jamais commencer par un chiffre.
- Il peut contenir des lettres, des chiffres, des tirets bas ou des dollars.
- Les noms de variables sont sensibles à la casse. Ça veut dire que `maVariable` et `mavariable` sont deux variables différentes.
- Les mots réservés du langage (comme `let`, `const`, `function`, `if`, etc.) ne peuvent pas être utilisés comme nom de variable.
Au-delà des règles techniques, la convention la plus importante en JavaScript est le camelCase. Cette convention consiste à écrire la première lettre du premier mot en minuscule, et la première lettre de chaque mot suivant en majuscule. C’est le standard utilisé par la communauté.
- Mauvais : `let x = 30;`
- Bon : `let userAge = 30;` ou `const maxLoginAttempts = 3;`
Comprendre la portée des variables (Scope)
La portée (ou « scope » en anglais) est un concept central en JavaScript. Elle définit simplement l’endroit où votre variable est accessible dans le code. Comprendre la portée vous évite de nombreuses erreurs, notamment des « ReferenceError: variable is not defined ».
La portée de bloc : `let` et `const`
Les variables déclarées avec `let` et `const` ont une portée de bloc. Cela signifie qu’elles ne sont accessibles qu’à l’intérieur du bloc `{…}` où elles ont été déclarées. Un bloc peut être une condition `if`, une boucle `for` ou `while`, ou simplement une paire d’accolades.
Cette particularité est très utile car elle empêche les variables de « fuiter » et d’interférer avec d’autres parties de votre code.
function testScope() {
let score = 100; // Accessible dans toute la fonction
if (score > 50) {
let message = "Bravo !"; // Accessible uniquement dans ce bloc if
console.log(message); // Affiche "Bravo !"
}
// console.log(message); // Erreur ! message n'est pas défini ici.
}
testScope();La portée de fonction : `var`
Les variables déclarées avec `var` ont une portée de fonction. Elles sont accessibles n’importe où à l’intérieur de la fonction où elles ont été déclarées, peu importe le bloc `{…}`. C’est ce comportement qui peut être source de confusion et de bugs.
Dans l’exemple ci-dessous, la variable `message` déclarée avec `var` est accessible même en dehors du bloc `if`, ce qui n’est souvent pas le comportement souhaité.
function testVarScope() {
var score = 100;
if (score > 50) {
var message = "Bravo !"; // Portée de fonction
console.log(message); // Affiche "Bravo !"
}
console.log(message); // Affiche aussi "Bravo !". La variable a "fuité" du bloc if.
}
testVarScope();Bonnes pratiques et erreurs courantes
Pour écrire du code JavaScript propre et efficace, voici quelques règles simples à suivre concernant l’utilisation des variables.
- Utilisez `const` par défaut : Prenez l’habitude de déclarer toutes vos variables avec `const`. Si vous réalisez plus tard que la valeur doit changer, alors seulement vous pouvez passer à `let`. Cela prévient les modifications accidentelles.
- Utilisez `let` uniquement si nécessaire : `let` est la solution quand vous savez qu’une variable devra être ré-assignée. Typiquement pour les compteurs dans les boucles ou les variables qui stockent un état changeant.
- Évitez `var` : Ne l’utilisez plus dans votre code. `let` et `const` sont plus sûrs et plus prévisibles.
- Donnez des noms explicites : Ne sacrifiez jamais la clarté pour la brièveté. `let annualRevenue` est bien mieux que `let ar`.
- Déclarez vos variables en haut de leur portée : Pour une meilleure lisibilité, déclarez vos variables au début de votre fonction ou de votre bloc.
FAQ – Questions fréquentes sur les variables JavaScript
Quelle est la différence principale entre `let` et `var` ?
La différence majeure est la portée (scope). `let` a une portée de bloc `{…}`, ce qui signifie qu’elle n’existe que dans le bloc où elle est définie. `var` a une portée de fonction, ce qui la rend accessible dans toute la fonction, même en dehors du bloc où elle est déclarée, ce qui peut causer des effets de bord inattendus.
Pourquoi `const` est-il préférable à `let` quand c’est possible ?
Utiliser `const` rend votre intention plus claire : cette valeur n’est pas censée changer. Cela rend le code plus prévisible et plus facile à déboguer. Si quelqu’un (ou vous-même) essaie de modifier une constante par erreur, JavaScript lèvera une erreur, vous aidant à repérer le bug immédiatement.
Peut-on déclarer une variable sans lui assigner de valeur ?
Oui, c’est possible avec `let` et `var`. Si vous déclarez une variable sans lui assigner de valeur, sa valeur par défaut sera `undefined`. Attention, ce n’est pas possible avec `const`, qui exige une valeur dès sa déclaration (`const name;` générera une erreur).
