Boucles en JavaScript

🔄 Le cours : répéter en JavaScript

Une boucle répète un bloc d'instructions. Elle a toujours besoin de trois choses : un départ, une condition d'arrêt et un pas qui mène à cet arrêt. Il en manque une et la boucle ne s'arrête jamais ou ne démarre pas.

La boucle for

for (init; condition; pas) : l'initialisation a lieu une fois, la condition est testée avant chaque tour, le pas est exécuté après chaque tour. Déclare le compteur avec let : il est alors propre à la boucle.

for (let i = 1; i <= 5; i++) {
  console.log(`7 x ${i} = ${7 * i}`);
}

7 x 1 = 7
7 x 2 = 14
7 x 3 = 21
7 x 4 = 28
7 x 5 = 35

La boucle while

while (condition) convient quand on ne sait pas à l'avance combien de tours seront nécessaires. Ici, on additionne les chiffres de 2845 : n % 10 donne le dernier chiffre, Math.floor(n / 10) le retire (la division JavaScript n'est pas entière).

let n = 2845;
let somme = 0;

while (n > 0) {
  somme += n % 10;
  n = Math.floor(n / 10);
}
console.log(somme);

19

do … while : au moins un tour

Le test est fait après le bloc : le corps s'exécute donc au moins une fois, même si la condition est fausse dès le début.

let i = 10;
do {
  console.log("une fois quand meme");
  i++;
} while (i < 5);
console.log("i vaut", i);

une fois quand meme
i vaut 11

for…of : parcourir les valeurs

for (const x of collection) donne à x chaque valeur d'un tableau, d'un texte, d'un Set ou d'un Map. Pas d'indice à gérer, donc pas d'erreur d'un cran : c'est la boucle à préférer quand tu n'as pas besoin de la position.

const langages = ["Python", "C", "Java"];

for (const langage of langages) {
  console.log(langage.toUpperCase());
}
for (const lettre of "NSI") {
  console.log(lettre);
}

PYTHON
C
JAVA
N
S
I

Pour avoir aussi l'indice, parcours tableau.entries() avec une décomposition : for (const [i, valeur] of tableau.entries()).

for…in : parcourir les clés d'un objet

for (const cle in objet) donne chaque clé (un texte). Réserve-le aux objets ; pour un tableau, il énumère les indices sous forme de textes (et même d'éventuelles propriétés ajoutées) : utilise for…of. Pour avoir clé et valeur ensemble, Object.entries(objet) renvoie des paires.

const notes = { maths: 14, nsi: 17, anglais: 12 };

for (const matiere in notes) {
  console.log(`${matiere} : ${notes[matiere]}`);
}
console.log(Object.entries(notes).length);

maths : 14
nsi : 17
anglais : 12
3

forEach, map… ou une vraie boucle ?

break et continue

break quitte la boucle ; continue abandonne le tour en cours. while (true) crée une boucle sans fin que l'on arrête avec break.

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

let n = 51;
while (true) {
  if (n % 7 === 0) break;
  n++;
}
console.log(n);

25
56

Boucles imbriquées

Pour chaque tour de la boucle extérieure, la boucle intérieure recommence. Le nombre de tours se multiplie : n lignes de 1 à n étoiles font n(n+1)/2 tours, un coût quadratique (voir T(n) et O()).

for (let ligne = 1; ligne <= 4; ligne++) {
  console.log("*".repeat(ligne));
}

*
**
***
****

⚠️ Erreurs fréquentes

var dans une boucle avec une minuterie

Avec var, il n'existe qu'une seule variable i pour toute la boucle : quand les minuteries se déclenchent, la boucle est finie et i vaut 3. Avec let, chaque tour a sa propre copie de i.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
console.log("boucle terminee");

boucle terminee
3
3
3

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
console.log("boucle terminee");

boucle terminee
0
1
2

L'erreur d'un cran

Parcourir tableau.length éléments avec i <= tableau.length fait un tour de trop : tableau[tableau.length] vaut undefined (JavaScript ne signale pas d'erreur). La bonne condition est i < tableau.length.

for…in sur un tableau

for (const i in [10, 20]) { console.log(i + 1); }   // affiche "01" puis "11" : i est un texte !

for (const valeur of [10, 20]) { console.log(valeur + 1); }   // 11 puis 21

Une boucle infinie

Sans mise à jour de la variable testée, un while ne s'arrête jamais et gèle l'onglet. Ferme l'onglet ou recharge-le, puis vérifie que le pas est bien écrit. Dans l'atelier, un script qui boucle trop longtemps est interrompu.

Modifier un tableau pendant qu'on le parcourt

Supprimer ou insérer des éléments dans for…of ou forEach fait sauter ou répéter des éléments. Travaille sur une copie ([...tableau]) ou construis un nouveau tableau avec filter.

Croire que return dans un forEach sort de la fonction

Dans tableau.forEach((x) => { if (x > 3) return; }), le return ne quitte que le callback pour cet élément, pas la fonction englobante. Utilise un for…of.

📋 Aide-mémoire

• for (let i = 0; i < n; i++) (compteur en let), while (cond), do { … } while (cond);.
• for (const x of tableau ou texte) : valeurs ; for (const k in objet) : clés ; Object.entries(objet) : paires.
• break quitte, continue passe au tour suivant ; forEach ne s'interrompt pas.
• Indices d'un tableau : i < tableau.length ; JavaScript ne lève pas d'erreur hors limites (undefined).
• map transforme, filter sélectionne, reduce combine : souvent plus clair qu'une boucle.
• Boucles imbriquées : les tours se multiplient (coût quadratique) ; var + minuterie = piège, utilise let.