Répéter une opération avec une boucle

Quand une liste contient plusieurs tâches, vous ne voulez pas écrire une instruction différente pour chacune. Une boucle répète les mêmes instructions et vous permet, par exemple, de compter les tâches terminées. Dans cette leçon, vous allez découvrir les deux formes de boucle les plus courantes avant de regrouper les tâches dans une structure adaptée.

Répéter un nombre déterminé de fois avec for

La boucle for convient lorsque vous connaissez le nombre d’itérations à effectuer. Elle comporte une initialisation, une condition qui autorise la répétition et une mise à jour du compteur. Dans cet exemple, numero commence à zéro, augmente de un après chaque passage et la boucle s’arrête avant d’atteindre quatre.

for (let numero = 0; numero < 4; numero += 1) {
  console.log(`Passage ${numero + 1}`);
}

Passage 1
Passage 2
Passage 3
Passage 4

Ici, let numero = 0 prépare le compteur, numero < 4 vérifie s’il faut continuer et numero += 1 avance vers la fin. La variable est déclarée avec let, car sa valeur change à chaque tour. Comme dans les exemples précédents, les résultats s’affichent dans la console de votre module JavaScript.

Parcourir une série avec for...of

Pour illustrer le comptage avant d’introduire les tableaux et les objets dans les prochaines leçons, vous pouvez coder temporairement les états sous forme de caractères : 1 indique une tâche terminée et 0 une tâche en cours. La boucle for...of parcourt ces caractères l’un après l’autre. À chaque caractère égal à 1, vous augmentez le compteur des tâches terminées.

const etatsDesTaches = "1010";
let nombreDeTachesTerminees = 0;

for (const etat of etatsDesTaches) {
  if (etat === "1") {
    nombreDeTachesTerminees += 1;
  }
}

console.log(`${nombreDeTachesTerminees} tâche(s) terminée(s)`);

2 tâche(s) terminée(s)

La variable etat reçoit le caractère du tour courant ; vous n’avez donc pas besoin de gérer vous-même un numéro de position. La condition etat === "1" sélectionne les tâches terminées, puis le compteur augmente. La vérification utilise une égalité stricte, déjà étudiée dans la leçon sur les comparaisons.

Contrôler le déroulement d’une boucle

continue passe directement au tour suivant, tandis que break arrête la boucle. Ces instructions sont utiles quand vous devez ignorer certains éléments ou interrompre un parcours dès qu’une condition est satisfaite. Employez-les seulement lorsque cela clarifie la logique : une condition explicite dans le corps de la boucle est souvent plus facile à suivre.

const etatsDesTaches = "1010";
let nombreDeTachesTerminees = 0;

for (const etat of etatsDesTaches) {
  if (etat === "0") {
    continue;
  }

  nombreDeTachesTerminees += 1;
}

console.log(`Tâches terminées : ${nombreDeTachesTerminees}`);

Tâches terminées : 2

Dans ce second exemple, les états égaux à "0" sont ignorés et le compteur n’augmente que pour les autres. Pour vérifier le code, remplacez temporairement la valeur de etatsDesTaches par "0000", puis par "1111" : le résultat attendu est respectivement zéro puis quatre tâches terminées. Si vous copiez plusieurs exemples dans js/main.js, retirez les déclarations répétées de mêmes noms pour éviter les erreurs.

À retenir

• Utilisez for lorsque vous contrôlez un compteur et connaissez la condition d’arrêt.
• Utilisez for...of pour parcourir directement les éléments d’une série.
• Un compteur avec let peut être augmenté au fil du parcours pour calculer un total.
• continue ignore le reste du tour courant ; break met fin à la boucle.

Dans la prochaine leçon, vous remplacerez la représentation temporaire des états par un tableau de tâches, puis vous pourrez parcourir directement les données du gestionnaire.