Débutant20 min de lecture

Boucles

Apprends à répéter des actions avec les boucles for, while, do...while, et à contrôler leur flux avec break et continue.

La boucle for

La boucle for répète un bloc de code un nombre spécifique de fois. Sa syntaxe comporte trois parties :

javascript
for (initialization; condition; update) {
  // code to repeat
}
  • Initialization — S'exécute une fois avant le début de la boucle. Déclare généralement une variable compteur.
  • Condition — Vérifiée avant chaque itération. Si fausse, la boucle s'arrête.
  • Update — S'exécute après chaque itération. Incrémente généralement le compteur.

Le pattern le plus courant :

javascript
for (let i = 0; i < 5; i++) {
  console.log('Iteration:', i);
}
// Output: 0, 1, 2, 3, 4

Tu peux utiliser les boucles for pour parcourir des tableaux par index :

javascript
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

while et do...while

La boucle while répète un bloc de code tant qu'une condition est vraie. Elle vérifie la condition avant chaque itération :

javascript
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

Utilise une boucle while quand tu ne sais pas à l'avance combien de fois la boucle doit s'exécuter — par exemple, pour lire une saisie utilisateur jusqu'à obtenir une valeur valide.

La boucle do...while est similaire, mais elle vérifie la condition après chaque itération. Cela garantit que le bloc de code s'exécute au moins une fois :

javascript
let num = 10;
do {
  console.log(num);
  num++;
} while (num < 5);
// Output: 10 (runs once even though 10 < 5 is false)

Attention : Fais attention à toujours inclure une logique qui rend finalement la condition fausse. Sinon, tu crées une boucle infinie qui va bloquer le navigateur.

break et continue

Deux mots-clés te donnent un contrôle plus fin sur l'exécution des boucles :

  • break — Sort immédiatement et complètement de la boucle.

    javascript
    for (let i = 0; i < 100; i++) {
      if (i === 5) break;
      console.log(i);
    }
    // Output: 0, 1, 2, 3, 4
  • continue — Saute le reste de l'itération actuelle et passe à la suivante.

    javascript
    for (let i = 0; i < 6; i++) {
      if (i === 3) continue;
      console.log(i);
    }
    // Output: 0, 1, 2, 4, 5 (3 is skipped)

Pour les boucles imbriquées, tu peux utiliser des labels pour sortir ou continuer une boucle externe spécifique :

javascript
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
    console.log(i, j);
  }
}

Construire une liste dynamiquement

html
<ul id="list"></ul>

<script>
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  const list = document.getElementById('list');

  for (let i = 0; i < fruits.length; i++) {
    const li = document.createElement('li');
    li.textContent = `${i + 1}. ${fruits[i]}`;
    list.appendChild(li);
  }
</script>

Combien de fois `for (let i = 0; i < 3; i++)` exécute-t-il son corps ?

Prêt à pratiquer ?

Crée ton compte gratuit pour accéder à l'éditeur de code interactif, lancer les défis et suivre ta progression.