La boucle while en JavaScript

« On ne sait pas combien de fois elle va tourner… mais elle tournera. » 🔁😎

Quand on apprend JavaScript, il y a certaines structures qui :

• Paraissent simples au premier regard
• Puis, à un moment donné, figent ton navigateur
• Et finissent par t’enseigner une vraie leçon de vie

C’est exactement ce qu’est la boucle while.

Logique de la boucle while : mettons ça au clair 🧠

La boucle while dit :

« Tant que la condition est true…
je suis là.
Quand la condition devient false…
je disparais. »

Syntaxe générale

while (condition) {
  // code exécuté de manière répétée
}

📌 Détail important :

• La condition est vérifiée en premier
• Ensuite, le code à l’intérieur s’exécute
• La condition est vérifiée à nouveau
• Et cela continue ainsi…

L’exemple le plus simple

(Mais aussi le plus instructif) 🔢

let counter = 1;

while (counter <= 5) {
  console.log("Counter:", counter);
  counter++;
}

L’histoire du code, étape par étape 📖

1️⃣ counter = 1

« Je commence. »

2️⃣ counter <= 5

« La condition est-elle vraie ? » → OUI

3️⃣ console.log

« Affiche à l’écran. »

4️⃣ counter++

« Avance d’un pas. »

5️⃣ La boucle revient au début 🔄

🧠 Point crucial :

Si counter++ manque… tu es dans le pétrin 😅

Boucle infinie

(Le bug qui fige ton navigateur) 🧊💥

Regardons maintenant le trou noir de JavaScript.

let counter = 1;

while (counter <= 5) {
  console.log("Hello");
}

Qu’est-ce qui ne va pas ?

• counter ne change jamais
• La condition est toujours vraie
• La boucle ne se termine jamais

🧨 Résultat :

• CPU à 100 %
• Le ventilateur sonne comme un moteur d’avion ✈️
• La question classique : « Pourquoi ça arrive ? »

📌 Règle :

Une boucle while doit toujours contenir quelque chose qui modifie la condition.

Quand faut-il utiliser while ? 🎯

for ou while ?

🧠 En résumé :

S’il y a de l’incertitude, il y a while.

Situation réelle : demander un nombre à l’utilisateur 🎮

let number = null;

while (number === null || isNaN(number)) {
  number = Number(prompt("Please enter a number"));
}

console.log("Entered number:", number);

Que se passe-t-il ici ?

• L’utilisateur tape n’importe quoi ❌
• Clique sur annuler ❌
• Entre des lettres ❌

➡️ La boucle continue
➡️ Elle se termine seulement avec une valeur valide 🎉

📌 Astuce pratique :

Formulaires, prompts et inputs sont l’habitat naturel des boucles while 🏕️

break : la version code de « Ça suffit » 🛑

let i = 1;

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

Qu’avons-nous fait ?

• La boucle commence à 1
• Sortie d’urgence à 5
• Le reste est ignoré

📌 break :

Arrête complètement la boucle.

continue : « Saute ça, continue » ⏭️

let i = 0;

while (i < 5) {
  i++;

  if (i === 3) {
    continue;
  }

  console.log(i);
}

Résultat :

1
2
4
5

📌 continue :

• Ne termine pas la boucle
• Ignore seulement l’itération en cours

while(true) : effrayant ? 😱

Non…
Bien utilisé, c’est même très puissant.

while (true) {
  let answer = prompt("Press q to quit");

  if (answer === "q") {
    break;
  }
}

🧠 Logique :

• Démarrer une boucle infinie
• Reprendre le contrôle avec break

📌 Les professionnels l’utilisent souvent
📌 Mais sans break… CATASTROPHE 😅

do...while : exécuter d’abord, vérifier ensuite 🔄

let password;

do {
  password = prompt("Enter password");
} while (password !== "1234");

alert("Welcome 😎");

Quelle est la différence ?

• Le code s’exécute au moins une fois
• La condition est vérifiée après

📌 Mots de passe, popups, interaction utilisateur = do...while

Mini-projet : jeu de devinette 🎯🎲

let guess;
let secret = 7;

while (guess !== secret) {
  guess = Number(prompt("Make a guess"));

  if (guess > secret) {
    alert("Go lower");
  } else if (guess < secret) {
    alert("Go higher");
  }
}

alert("You got it! 🎉");

Que nous apprend cet exemple ?

✔️ Comment while est utilisé dans la vraie vie
✔️ Comment les conditions sont mises à jour
✔️ L’interaction utilisateur
✔️ Une fin naturelle sans break

Erreurs fréquentes ❌

(Et comment les éviter)

❌ Oublier d’incrémenter le compteur
✔️ Toujours se demander : « Comment cette condition deviendra-t-elle false ? »

❌ Mauvaises comparaisons
✔️ Utilise ===, ne devine pas

❌ while(true) sans break
✔️ Planifie toujours ta sortie

Conseils de pro 🧠🔥

💡 while fonctionne très bien avec l’event loop et l’asynchrone
💡 Parfait pour la validation, les tentatives multiples et le polling
💡 Pour plus de lisibilité, utilise des conditions claires comme :

while (isValid === false) {
  ...
}

Résumé rapide

(Mais qui reste en tête) 🧠✨

• while → s’exécute tant que la condition est vraie
• Il doit toujours y avoir une sortie
• Le meilleur choix quand le nombre d’itérations est inconnu
• break et continue te donnent le contrôle
• Mal utilisé… il fera pleurer ton navigateur 😅