Boucle for en JavaScript : syntaxe et exemples

La boucle for en JavaScript

Quand tu sais à l'avance combien de fois tu veux répéter une action, la boucle for en JavaScript est l'outil idéal. Sa syntaxe regroupe sur une seule ligne les trois éléments clés d'une boucle comptée : l'initialisation, la condition d'arrêt et l'incrément.

Cinq itérations, cinq lignes affichées. Décortiquons l'en-tête :

• let i = 0 ne s'exécute qu'une seule fois, avant que la boucle ne démarre. C'est l'initialisation du compteur.
• i < 5 est évalué avant chaque tour. Si c'est true, le corps s'exécute. Si c'est false, la boucle s'arrête.
• i++ s'exécute après chaque tour, juste avant que la condition ne soit réévaluée.

Les trois parties sont séparées par des points-virgules, pas par des virgules. Chacune est facultative, mais il est rare de les omettre — dans ce cas, on utilise plutôt while.

Comment les morceaux s'emboîtent

Pour bien ancrer l'ordre d'exécution, rien ne vaut un petit déroulé à la main :

Étape par étape :

1. let i = 1 — le compteur est créé et initialisé à 1.
2. On vérifie i <= 3 — vrai, donc on exécute le corps. On affiche 1.
3. On exécute i++ — i vaut maintenant 2.
4. On vérifie i <= 3 — vrai. On affiche 2.
5. On exécute i++ — i vaut maintenant 3.
6. On vérifie i <= 3 — vrai. On affiche 3.
7. On exécute i++ — i vaut maintenant 4.
8. On vérifie i <= 3 — faux. On sort de la boucle.

L'étape de mise à jour s'exécute après le corps, pas avant. C'est précisément là que beaucoup se font piéger.

Parcourir un tableau par index avec une boucle for

Le cas le plus classique d'une boucle for en JavaScript, c'est justement de parcourir un tableau. Le compteur sert alors directement d'index :

Quelques points à garder en tête :

• Les tableaux sont indexés à partir de zéro. Le premier élément est à l'index 0, le dernier à length - 1.
• La condition s'écrit i < fruits.length, et non i <= fruits.length. Avec <=, on irait un cran trop loin et on afficherait undefined.
• i est déclaré avec let, donc sa portée est limitée à la boucle. En dehors, la variable n'existe pas.

Si seules les valeurs t'intéressent (pas l'index), for...of est plus court et plus lisible — on y consacre un doc dédié.

break : sortir de la boucle plus tôt

break interrompt la boucle sur-le-champ. Pratique quand tu as trouvé ce que tu cherchais et qu'il n'y a plus de raison de continuer :

Dès que break s'exécute, le contrôle passe directement après l'accolade fermante de la boucle. L'étape de mise à jour ne tourne pas, la condition n'est pas re-testée — la boucle est tout simplement terminée.

continue : passer à l'itération suivante

continue saute le reste de l'itération en cours et file directement à l'étape de mise à jour. La boucle continue de tourner, elle ne termine juste pas le tour actuel.

Les nombres pairs déclenchent le continue et sautent le console.log. Seuls les impairs sont affichés. continue est bien pratique quand on veut exclure certaines itérations sans avoir à imbriquer tout le reste du corps dans un if.

Des pas autres que +1

L'étape d'incrémentation n'est qu'une expression. Rien ne t'oblige à utiliser i++. On peut très bien avancer de deux en deux :

Count down :

Parcourir un tableau à l'envers — ça peut rendre service quand on supprime des éléments au fur et à mesure :

Peu importe les noms choisis, la règle reste la même : la condition et la mise à jour doivent fonctionner ensemble pour que la condition finisse par passer à false. Sinon, la boucle tourne à l'infini. Par exemple, for (let i = 0; i < 10; i--) est une boucle infinie en JavaScript — i évolue dans le mauvais sens.

Boucle for imbriquée en JavaScript

Rien ne t'empêche de placer une boucle for à l'intérieur d'une autre. La boucle interne s'exécute entièrement à chaque itération de la boucle externe.

Neuf lignes en sortie : trois itérations externes, chacune avec trois itérations internes. Donne à chaque compteur un nom parlant (row/col, i/j) au lieu de réutiliser la même variable.

Un point de vigilance : break et continue n'agissent que sur la boucle la plus interne. Sortir d'une boucle interne avec break n'arrête pas la boucle externe. Si tu as besoin de ce comportement, utilise un drapeau (flag) que tu vérifies dans la boucle externe, ou extrais le traitement imbriqué dans une fonction et fais un return.

Les pièges classiques

Voici quelques erreurs qui piègent souvent les débutants :

Les erreurs d'indice (off-by-one). i <= arr.length fait une itération de trop ; i < arr.length - 1 s'arrête une itération trop tôt. La forme standard, c'est i < arr.length.

Oublier l'incrémentation. Si tu oublies i++ (ou son équivalent), le compteur ne change jamais et tu te retrouves avec une boucle infinie :

for (let i = 0; i < 10; ) {
    console.log(i); // ne se termine jamais
}

Utiliser var pour le compteur. var a une portée de fonction, donc le compteur « fuit » hors de la boucle et peut provoquer des comportements inattendus dans les closures. Restez sur let.

Modifier le tableau pendant qu'on le parcourt. Supprimer des éléments décale les indices et vous finirez par en sauter. Si vous devez en retirer, parcourez le tableau à l'envers, ou reconstruisez-en un nouveau avec filter.

Quand choisir autre chose

La boucle for classique reste toujours disponible, mais JavaScript propose des alternatives plus concises pour les cas courants :

• Pour itérer sur les valeurs d'un tableau : for (const item of array) est plus propre.
• Pour transformer un tableau : array.map(fn) renvoie un nouveau tableau.
• Pour filtrer : array.filter(fn).
• Pour sommer ou réduire : array.reduce(fn, start).
• Pour exécuter quelque chose sur chaque élément : array.forEach(fn).

Gardez le for classique pour les cas où vous avez vraiment besoin de l'indice, où vous voulez sauter ou sortir en cours de route, ou quand il vous faut un pas inhabituel — compter à rebours ou avancer de deux en deux, par exemple.

La suite : les boucles while

La boucle for brille quand on connaît la plage à l'avance. Quand ce n'est pas le cas — quand on veut continuer jusqu'à ce qu'une condition change —, while et do...while sont mieux adaptés. C'est justement le sujet de la page suivante.