Boucles for en

À propos de Boucles for

Syntaxe générale

La boucle for est l'une des instructions les plus couramment utilisées pour exécuter une logique de façon répétée. En JavaScript, elle se compose du mot-clé for, d'un en-tête entre parenthèses et d'un bloc de code qui contient le corps de la boucle entre accolades.

for (initialization; condition; step) {
  // code that is executed repeatedly as long as the condition is
  // true
}

En-tête

L'initialisation prépare généralement une variable compteur, la condition vérifie si la boucle doit se poursuivre ou s'arrêter, et le pas incrémente le compteur à la fin de chaque répétition. Les différentes parties de l'en-tête sont séparées par des points-virgules.

const list = ['a', 'b', 'c'];
for (let i = 0; i < list.length; i++) {
  // code that should be executed for each item in the array
}

Les trois parties de l'en-tête sont facultatives. On y a rarement recours en pratique. Tu peux en lire plus à ce sujet dans la documentation MDN.

Boucles for imbriquées

Les boucles for peuvent être imbriquées, par exemple pour parcourir des tableaux imbriqués (multidimensionnels). Assure-toi de définir une variable compteur différente pour chaque boucle.

const coords = [
  [1, 2],
  [4, 7],
  [10, -3],
];

for (let i = 0; i < coords.length; i++) {
  for (let j = 0; j < coords[i].length; j++) {
    // do something with coords[i][j]
  }
}

break, continue et les étiquettes

À l'intérieur du corps d'une boucle, tu peux utiliser le mot-clé break pour arrêter complètement l'exécution de la boucle. En revanche, le mot-clé continue arrête seulement l'exécution de l'itération en cours et passe à la suivante.

Lorsque tu travailles avec des boucles imbriquées, break et continue s'appliquent toujours à la boucle la plus interne par défaut. Tu peux utiliser des étiquettes pour modifier ce comportement. Une étiquette est un nom d'identifiant suivi de deux-points. Elle est placée devant (ou au-dessus de) la boucle. Une telle étiquette peut ensuite être combinée avec break ou continue pour définir à quelle boucle l'instruction doit s'appliquer.

outer: for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    // ...
    if (j > 5) {
      continue outer;
    }
    // ...
  }
}

Compteur de boucle et code asynchrone

Tu dois faire attention à bien déclarer ta variable compteur lorsque tu manipules du code asynchrone. Regardons un exemple où l'on additionne la variable compteur de manière asynchrone avec setTimeout après avoir attendu 1 s. Lorsque tu déclares le compteur avec var ou avec let mais en dehors de l'en-tête, le code ne produit pas le résultat attendu.

let sum = 0;
for (var i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 12 instead of 6 (1+2+3)

let sum = 0;
let i;
for (i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// same here, eventually sum will be 12 instead of 6 (1+2+3)

Dans ces deux cas, la portée de i ne se limite pas à une itération spécifique de la boucle. Au moment où la somme est calculée, i a déjà atteint sa valeur finale 4, ce qui fait que la somme vaut 4 + 4 + 4 = 12.

Ce problème peut être évité en déclarant le compteur avec let à l'intérieur de l'en-tête. Cela a pour effet particulier que chaque itération obtient sa propre variable let i, dont la portée se limite exactement à cette exécution du corps de la boucle. Ainsi, lorsque la somme est calculée plus tard, chaque fonction de rappel fait référence à sa propre variable i, qui contient encore la valeur correcte.

let sum = 0;
for (let i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 6 (1+2+3) as expected