🔁 Prendre le Contrôle des Boucles en JavaScript

Diriger les boucles avec break et continue 🚗💨

Les boucles en JavaScript ressemblent un peu à ça :

Tu fais quelque chose…
« Fais-le encore. »
« Encore. »
« Encore. »
« Ok, stop maintenant. »

Et pour être sûrs que c’est nous qui pouvons dire « stop » ou « saute celle-ci »,
JavaScript nous donne deux clés spéciales :

🛑 break → « Cette boucle s’arrête ici. »

⏭️ continue → « Saute ce tour et avance. »

Dans cet article, nous allons voir :

• Ce qu’ils font réellement
• Quand il ne faut jamais les utiliser
• Des situations réelles où ils sauvent la mise
• Et ces moments du genre « Mais pourquoi JS a fait ça ?! »

Le tout avec beaucoup de code, des explications claires et une bonne dose d’humour 😎

🎡 D’abord, soyons clairs : des boucles sans contrôle sont dangereuses

Grâce aux boucles, nous pouvons :

• Parcourir des listes
• Vérifier des données
• Faire faire à JavaScript la même chose encore et encore

Mais parfois, on veut dire :

• « J’ai trouvé ce que je cherchais, inutile de continuer »
• « Cet élément est absurde, saute-le »
• « Tout ce qui vient après ne me concerne plus »

Et c’est précisément là que :

break et continue entrent en scène 🎬

🛑 break : « Ça suffit. Tout le monde rentre chez soi. »

break met fin complètement à la boucle.
Il ne revient pas.
Il ne prend pas de nouvelles plus tard.
Il n’envoie même pas un message sur WhatsApp.

🔹 L’exemple le plus simple de break

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

🧠 Que se passe-t-il ligne par ligne ?

• i = 1 → pas 5 → affiché
• i = 2 → affiché
• i = 3 → affiché
• i = 4 → affiché
• i = 5 → condition remplie
• break → la boucle est morte 🪦

📤 Résultat :

1
2
3
4

📌 Règle d’or :

Dès que break est exécuté, la boucle ne s’exécutera plus jamais.

🔍 Scénario de la vie réelle : chercher quelque chose

Si tu parcours une liste et que tu continues après avoir trouvé ce que tu cherches,
il y a clairement un problème 😄

const users = ["Ali", "Ayşe", "Cansu", "Mehmet", "Zeynep"];

for (let user of users) {
  if (user === "Cansu") {
    console.log("🎉 La personne que nous cherchions a été trouvée !");
    break;
  }
  console.log(user + " vérifié");
}

🧠 Logique :

• Parcourir la liste élément par élément
• Quand tu trouves ce que tu veux :
  • Afficher un message
  • Sortir avec break
• Ne pas vérifier le reste → meilleures performances + logique plus propre ✨

⏭️ continue : « Je n’aime pas celui-là, on passe. »

continue ne termine pas la boucle.
Il ignore simplement l’itération en cours.

Autrement dit :

« J’ignore cet élément, mais j’avance quand même. »

🔹 Exemple : ignorer les nombres pairs

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

🧠 Étape par étape :

• i = 1 → impair → affiché
• i = 2 → pair → continue
• i = 3 → affiché
• i = 4 → continue
• …

📤 Résultat :

1
3
5
7
9

📌 Résumé en une phrase :

continue → « Fais comme si cet élément n’existait pas. »

🍔 Exemple de filtrage : version vie réelle

Imagine une liste de commandes :

❌ froid
❌ rassis
❌ incorrect

Mais :

🔥 chaud
🔥 correct

const orders = ["cold", "hot", "stale", "hot"];

for (let order of orders) {
  if (order === "cold" || order === "stale") {
    continue;
  }
  console.log("Celui-ci est consommable :", order);
}

🧠 Logique :

• Ignorer ce que tu ne veux pas avec continue
• Traiter uniquement ce qui est utile

🔄 Attention aux boucles while ⚠️

continue est plus dangereux à l’intérieur des boucles while.

❌ Code incorrect (boucle infinie)

let i = 0;

while (i < 5) {
  if (i === 2) {
    continue;
  }
  console.log(i);
  i++;
}

😱 Que s’est-il passé ?

Quand i === 2 :

• continue s’exécute
• i++ ne s’exécute jamais
• i reste bloqué à 2
• La boucle ne se termine jamais

✅ Utilisation correcte

let i = 0;

while (i < 5) {
  i++;
  if (i === 2) continue;
  console.log(i);
}

📌 Règle vitale :

Si tu utilises continue,
la logique d’incrémentation/décrémentation doit venir avant.

🧠 break vs continue — Comparaison claire

💎 Conseils de pro (de l’or pur)

✨ 1. Trop de break / continue nuisent à la lisibilité

if (...) continue;
if (...) break;
if (...) continue;

→ Surcharge cérébrale 🧠🔥

✨ 2. Parfois, les méthodes de tableau sont plus propres

• filter
• find
• some

Mais :

Si une boucle est nécessaire,
break et continue sont des outils de maîtrise.

✨ 3. break ne sort que de la boucle la plus proche

• Attention particulière aux boucles imbriquées 👀

🧩 Mini aide-mémoire

• 🔁 Boucle = répétition
• 🛑 break = terminer la boucle
• ⏭️ continue = sauter cette itération
• ⚠️ while + continue = réfléchir à deux fois
• 🧠 Peu mais bien utilisé = code propre

🎯 Mot de la fin

break et continue sont :

• Les freins et les clignotants des boucles 🚦
• Bien utilisés, ils rendent ton code plus rapide
• Mal utilisés, ils t’envoient tout droit en enfer des boucles infinies 😈