Leçon 2 / 15

Déclarer des variables avec const et let

15 min JavaScript — les bases du langage Gratuit

Objectif : Choisir entre const et let pour stocker le titre, le statut et le nombre de tâches.

Quand vous commencez à écrire le gestionnaire, vous avez besoin de garder en mémoire des informations comme le titre d’une tâche ou le nombre de tâches enregistrées. Sans noms clairs, les instructions deviennent difficiles à relire et à corriger. Vous allez apprendre à déclarer ces noms avec `const` ou `let`, puis à choisir le mot adapté selon que la valeur doit changer ou non.

Vous avez déjà relié `js/main.js` à la page et vérifié son exécution dans la console, comme expliqué dans la leçon précédente. Pour cette étape, vous allez remplacer l’instruction de test de ce fichier par quelques déclarations liées au gestionnaire. Une variable est un nom auquel JavaScript associe une valeur ; choisissez un nom qui indique clairement à quoi cette valeur sert.

Déclarer une valeur qui ne sera pas réaffectée

Commencez une déclaration avec `const`, suivie du nom choisi, du signe `=` et de la valeur initiale. Dans le projet, le titre principal est déjà indiqué dans le HTML : vous pouvez conserver le même texte dans une variable pour l’utiliser dans vos premiers essais. Une déclaration `const` doit recevoir sa valeur dès sa création et vous ne pouvez pas ensuite remplacer cette valeur par une autre.

JavaScript
const titreGestionnaire = "Mes tâches";
const titreTache = "Préparer la réunion";

console.log(titreGestionnaire);
console.log(titreTache);
Aperçu du rendu
Chargement de l'aperçu…
Résultat attendu
Mes tâches
Préparer la réunion

Les noms `titreGestionnaire` et `titreTache` permettent de comprendre ce que chaque valeur représente. Les noms de variables JavaScript ne contiennent pas d’espace ; la convention utilisée ici commence par une minuscule et marque chaque nouveau mot par une majuscule. Vous pouvez consulter les deux résultats dans la console du navigateur. Dans la suite du projet, vous choisirez `const` par défaut lorsque vous n’avez pas besoin de réaffecter la variable.

Utiliser let lorsqu’une valeur doit changer

Certaines informations évoluent pendant l’utilisation du gestionnaire. Le nombre de tâches augmente lorsqu’une tâche est ajoutée, et le statut d’une tâche peut passer de « à faire » à « terminée ». Pour ces valeurs, déclarez une variable avec `let` : vous pourrez lui attribuer une nouvelle valeur par la suite en réutilisant son nom.

JavaScript
let nombreTaches = 0;
let statutTache = "à faire";

console.log(nombreTaches);
console.log(statutTache);

nombreTaches = 1;
statutTache = "terminée";

console.log(nombreTaches);
console.log(statutTache);
Aperçu du rendu
Chargement de l'aperçu…
Résultat attendu
0
à faire
1
terminée

Les deux premières instructions donnent une valeur de départ aux variables. Plus bas, les instructions qui commencent par `nombreTaches =` et `statutTache =` remplacent cette valeur : c’est une réaffectation. Vous ne répétez pas `let` lors d’une réaffectation, car la variable a déjà été déclarée. Quand vous exécuterez le code, la console affichera d’abord les valeurs de départ, puis les nouvelles valeurs.

Éviter les erreurs courantes

Une variable déclarée avec `const` ne peut pas être réaffectée. Si vous essayez, par exemple, de remplacer `titreTache` par un autre texte, le navigateur signale une erreur et l’exécution s’interrompt à cet endroit. Quand une valeur doit évoluer, choisissez `let` dès la déclaration plutôt que de tenter de contourner cette règle.

À l’inverse, vous n’avez pas besoin de déclarer plusieurs fois un nom pour actualiser sa valeur. Une deuxième déclaration avec `let` pour `nombreTaches`, par exemple, provoquerait une erreur dans le même fichier. Déclarez chaque variable une seule fois, puis réaffectez-la uniquement si son rôle le justifie. Cette règle aide à garder votre code prévisible à mesure que le gestionnaire se développe.

À retenir

  • Utilisez `const` pour une variable que vous n’avez pas à réaffecter ; donnez-lui sa valeur dès sa déclaration.
  • Utilisez `let` lorsque la valeur doit évoluer, par exemple pour le nombre ou le statut d’une tâche.
  • Pour réaffecter une variable, écrivez son nom suivi de `=` et de sa nouvelle valeur, sans répéter `let`.
  • Choisissez des noms explicites et déclarez chaque variable une seule fois.

Dans la prochaine leçon, vous examinerez les différentes sortes de valeurs que vous pouvez placer dans ces variables et les expressions que vous pouvez construire avec elles.

Envie d'aller plus loin ?

Les cours Enovatic sont gratuits et le resteront. Si vous cherchez un accompagnement encadré, nos formations professionnelles sont animées par les mêmes formateurs.