Apprenez en lisant dans l'ordre

Répéter selon une condition — while, do...while, break et continue

while et do...while en JavaScript : répéter sans nombre de tours fixé, éviter la boucle infinie, choisir continue ou break.

Faire passer des personnes de la liste d'attente dès que des places se libèrent, ou racheter le même article tant que le solde le permet : pour ce genre de tâche, tu sais quand t'arrêter, mais pas combien de fois il faudra répéter.

Cet article couvre while et do...while, qui répètent selon une condition, continue, qui saute un tour, et break, qui sort de la boucle.

Répéter sans nombre fixe — while et la mise à jour de la condition

Imaginons que des places se libèrent et que tu veuilles les attribuer dans l'ordre, en partant du début de la liste d'attente. Chaque attribution retire une place, et tu t'arrêtes quand il reste 0 place. Ce qui arrête la boucle, c'est un état — « tant qu'il reste des places » — et non un nombre de tours : une boucle for qui compte ne l'exprime donc pas naturellement.

Une boucle while (une instruction qui répète le corps entre accolades tant que la condition entre parenthèses est vraie) ne prend qu'une condition entre ses parenthèses. Cette condition est testée à chaque tour, avant d'entrer dans le corps.

C'est à toi de fixer la valeur de départ avant la boucle, et de mettre à jour, dans le corps, la variable que teste la condition.

const waitingList = ["Alice", "Léa", "Hugo"];   // liste d'attente
let openSeats = 2;                              // places libres

// Attribue des places seulement tant qu'il en reste
while (openSeats > 0) {
  const name = waitingList.shift();
  openSeats--;   // équivaut à openSeats = openSeats - 1
  console.log(`${name} obtient une place (places restantes : ${openSeats})`);
}
// Alice obtient une place (places restantes : 1)
// Léa obtient une place (places restantes : 0)

console.log(`Toujours en attente : ${waitingList.length}`);   // Toujours en attente : 1
Une boucle while qui se termine, et une qui ne se termine pas
ConditionopenSeats > 0Le corps attribueune placeopenSeats--mise à jourÀ 0, la conditiondevient fausseConditionopenSeats > 0Le corps attribueune placePas de mise à jourReste à 2,ne finit jamais
Si le corps diminue la variable que teste la condition, celle-ci finit par devenir fausse et la boucle se termine. Sinon, le test donne le même résultat à chaque fois et le corps continue de s'exécuter.

Dans une boucle for, l'expression de mise à jour a une place fixe entre les parenthèses ; avec while, c'est toi qui décides où la placer dans le corps. Le revers de cette liberté, c'est que rien ne t'empêche de l'oublier : sans la mise à jour, le code reste parfaitement valide.

Sans mise à jour, la boucle ne s'arrête jamais

Si la condition ne devient jamais fausse, le corps se répète à l'infini. Si tu oublies d'écrire openSeats--, le nombre de places reste à 2 et le test donne toujours le même résultat. La console signale un dépassement de délai au bout de 15 secondes, mais la boucle ne s'arrête pas, et les autres exercices ne fonctionneront plus tant que tu n'auras pas rechargé la page. Modifie toujours, quelque part dans le corps, la variable que teste la condition.

Utilise un solde de points pour acheter autant d'exemplaires d'un même article que possible. balance et unitPrice sont déjà déclarées.

① Prépare une variable initialisée à 0 pour compter les articles achetés.

② Écris la condition de la boucle pour qu'elle ne se répète que tant que le solde suffit pour un article de plus.

③ À chaque tour, diminue le solde, augmente le compteur et affiche « Article ◯ (points restants : ◯) ».

④ Après la boucle, affiche sur une seule ligne le nombre d'articles achetés et les points restants.

(Si tout s'exécute correctement, une explication apparaîtra.)

Éditeur JavaScript / TypeScript

Exécuter le code pour voir le résultat

Exécuter d'abord, tester ensuite — do...while

Quand l'envoi d'une notification échoue, on la renvoie quelques fois jusqu'à ce qu'elle passe. Il faut envoyer au moins une fois avant d'avoir un résultat à vérifier, mais while teste sa condition avant d'entrer dans le corps : selon la valeur de départ de la variable testée, la boucle peut se terminer sans rien envoyer.

Une boucle do...while (une instruction qui exécute le corps une fois, puis teste la condition) s'écrit do { corps } while (condition);, et l'ensemble, jusqu'au point-virgule final, forme une seule instruction. Comme le test vient après le corps, celui-ci s'exécute une fois même si la condition est fausse dès le départ.

const attempts = [false, false, true];   // résultats d'envoi préparés à l'avance (true signifie réussi)
let sent = true;                         // resté à true depuis la notification précédente
let tried = 0;

// while teste d'abord : il se termine sans rien envoyer
while (!sent && tried < attempts.length) {
  sent = attempts[tried];
  tried++;
}
console.log(`Envois avec while : ${tried}`);   // Envois avec while : 0

// do...while envoie une première fois avant de tester, puis décide selon le résultat s'il continue
do {
  sent = attempts[tried];
  tried++;
  console.log(`Tentative ${tried} : ${sent ? "réussie" : "échouée"}`);
} while (!sent && tried < attempts.length);
// Tentative 1 : échouée / Tentative 2 : échouée / Tentative 3 : réussie
Ce qui distingue while et do...while au départ
Démarre avecsent = trueTeste d'abord!true vaut falseN'entre pasdans le corpsEnvoyé 0 foisDémarre avecsent = trueCorps d'abord,1er envoiRésultat false,!false continueS'arrête quand le3e envoi réussit
Les deux boucles démarrent avec sent encore à true. while s'arrête après le seul test, alors que do...while envoie une fois, puis décide s'il continue.

Seul le premier tour échappe au test ; ensuite, la boucle ne se répète que tant que la condition est vraie, exactement comme while. Si tu ne veux pas que le corps s'exécute du tout quand la condition est fausse, choisis while. Si tu veux qu'il s'exécute une fois avant de regarder le résultat, choisis do...while.

Attribue à une réservation de salle de réunion le plus petit numéro de réservation encore libre. Le tableau usedNumbers, qui contient les numéros déjà pris, est déjà déclaré.

① Prépare une variable initialisée à 0 pour le numéro à attribuer.

② Avec une boucle qui exécute son corps avant de tester, augmente le numéro de 1 et affiche « Vérification du numéro ◯ ».

③ Écris une condition qui fait continuer la boucle tant que le numéro figure dans le tableau des numéros pris.

④ Après la boucle, affiche « Numéro de réservation : ◯ ».

Éditeur JavaScript / TypeScript

Exécuter le code pour voir le résultat

Sauter un seul tour — quand utiliser continue

Quand tu parcours une liste d'expédition depuis le haut, tu veux sauter chaque ligne en rupture de stock et passer à la suivante. Plus tu ajoutes de conditions pour sauter, plus les accolades des if s'imbriquent, et le code d'expédition qui t'intéresse vraiment finit enfoui à l'intérieur.

Avec continue (une instruction qui saute le reste du tour en cours et passe au suivant), tu peux écourter un tour dès qu'une condition d'exclusion est remplie. La boucle elle-même continue : le tour suivant commence normalement, par le test de la condition.

const names = ["Agenda A5", "Lampe de bureau", "Hub USB"];
const stocks = [12, 0, 5];   // 0 signifie rupture de stock
let index = 0;

while (index < names.length) {
  const name = names[index];
  const stock = stocks[index];
  index++;   // avancer d'abord, pour que continue ne le saute pas

  // Pour les lignes en rupture, saute le reste de ce tour et passe au suivant
  if (stock === 0) {
    console.log(`${name} : en rupture, ignoré`);
    continue;
  }
  console.log(`${name} : expédition de ${stock}`);
}
// Agenda A5 : expédition de 12
// Lampe de bureau : en rupture, ignoré
// Hub USB : expédition de 5
Ligne traitéeValeur de stock et testRésultat de ce tour
Ligne 1 : Agenda A5stock vaut 12, pas 0Affiche « expédition de 12 »
Ligne 2 : Lampe de bureaustock vaut 0, donc continueLa ligne d'expédition ne s'exécute pas
Ligne 3 : Hub USBstock vaut 5, pas 0Affiche « expédition de 5 »

continue ne saute que les lignes situées entre lui et la fin du corps. Tu peux aussi utiliser continue dans le corps de for et de for...of ; et comme l'expression de mise à jour, entre les parenthèses d'une boucle for, se trouve hors du corps, elle s'exécute quand même lors d'un tour qui a rencontré continue.

continue saute aussi ta ligne de mise à jour

Si tu places index++ après continue, index n'avance pas lors du tour sauté. Le tour suivant relit la même ligne, stock vaut toujours 0, la condition ne change pas et la boucle ne se termine jamais. Mets à jour la variable que teste la condition avant continue.

Calcule la note moyenne des avis, en laissant de côté les valeurs qui ne comptent pas. Le tableau scores est déjà déclaré.

① Prépare des variables initialisées à 0 pour le total et pour le nombre de notes.

② Avec for...of, parcours les notes une par une.

③ Pour 0 (pas de note) et toute valeur supérieure à 5, affiche « ◯ exclu » et saute le reste de ce tour.

④ Ajoute les notes restantes au total et au compteur, puis, après la boucle, affiche « Moyenne : ◯.◯ (◯ avis) ».

Éditeur JavaScript / TypeScript

Exécuter le code pour voir le résultat

S'arrêter dès que c'est trouvé — où break t'emmène

Tu cherches uniquement la première erreur d'un journal, en le lisant depuis le haut. Continuer à lire jusqu'au bout après l'avoir trouvée, c'est du travail inutile, et selon la façon dont tu l'écris, une erreur plus loin peut écraser firstError.

Avec break (une instruction qui termine immédiatement la boucle dans laquelle elle se trouve), tu sors de la boucle au tour où la condition est remplie. C'est la même instruction que celle qui servait à sortir d'un switch dans l'article sur les conditions. Comme tu utiliseras la valeur trouvée en dehors de la boucle, déclare firstError avant la boucle.

const logs = ["INFO Démarrage", "WARN Réponse lente", "ERROR Paiement refusé", "ERROR Renvoi impossible"];
let index = 0;
let firstError = "";

while (index < logs.length) {
  const line = logs[index];
  index++;
  if (line.startsWith("ERROR")) {
    firstError = line;
    break;   // la première est trouvée, inutile de vérifier le reste
  }
}

console.log(`Première erreur : ${firstError}`);   // Première erreur : ERROR Paiement refusé
console.log(`Lignes examinées : ${index}`);       // Lignes examinées : 3
Les accolades dont break fait sortir
Accolades du while (examine le journal ligne par ligne)
  • const line = logs[index] — la ligne examinée à ce tour
  • Après break, l'exécution sort des accolades et passe à la ligne console.log suivante
Accolades du if (seulement les lignes qui commencent par ERROR)
  • firstError = line — enregistre la ligne trouvée
  • break — sort du while extérieur, pas seulement de ces accolades
  • Les lignes placées sous break ne s'exécutent jamais
Ni les lignes du corps situées sous break, ni les tours restants ne s'exécutent. L'exécution reprend à la ligne qui suit l'accolade fermante du while.

Même au tour qui rencontre break, le index++ écrit avant lui s'est déjà exécuté. index s'arrête donc à 3, et « Lignes examinées : 3 », affiché après la boucle, correspond à la position de la ligne trouvée, en comptant à partir de 1.

Ce qui distingue continue et break
continue quandstock === 0Retesteindex < 3Passe au tourdu Hub USBAfficheexpédition de 5break à la1re ligne ERRORNe teste pasindex < 4Ne lit pas l'ERRORde la ligne 4Va à la ligne quiaffiche l'erreur
Aucun des deux n'exécute le reste des lignes du tour. continue revient au test de la condition ; break quitte la boucle sans tester.

Alloue le stock aux commandes dans leur ordre de réception, et arrête-toi à la première commande pour laquelle le stock ne suffit pas. orderQuantities (la quantité de chaque commande) et stock (la quantité en stock) sont déjà déclarées.

① Avec for...of, parcours une par une les quantités des commandes.

② Au tour où la quantité dépasse le stock, affiche « Stock insuffisant pour une commande de ◯ » et termine la boucle.

③ Au tour où le stock suffit, diminue-le et affiche « Alloué : ◯ (reste ◯) ».

④ Après la boucle, affiche « Stock restant : ◯ ».

Éditeur JavaScript / TypeScript

Exécuter le code pour voir le résultat
QUIZ

Vérification des connaissances

Répondez à chaque question une par une.

Question 1Si une boucle while démarre avec une condition vraie et que le corps ne modifie jamais la variable que teste la condition, que se passe-t-il ?

Question 2Si la condition est fausse dès le départ, combien de fois le corps d'une boucle do...while s'exécute-t-il ?

Question 3Que se passe-t-il ensuite quand continue s'exécute dans une boucle ?