for en JavaScript : les trois boucles et celle qu'il faut écrire

Répéter un traitement sur une liste est l'opération la plus courante d'un programme : additionner des montants, afficher des lignes, transformer des données reçues d'une interface.

JavaScript propose trois boucles for, qui ne parcourent pas la même chose. Choisir la mauvaise ne provoque pas d'erreur, seulement un résultat inattendu, ce qui est plus long à diagnostiquer.

Définition

La forme historique tient en trois expressions séparées par des points-virgules : une initialisation, une condition vérifiée avant chaque tour, et une mise à jour exécutée après chaque tour.

const paniers = [12, 30, 8];
let total = 0;

for (let i = 0; i < paniers.length; i++) {
  total += paniers[i];
}

console.log(total);   // 50

Déclarer le compteur avec let plutôt qu'avec var lui donne une nouvelle liaison à chaque tour, ce qui compte dès qu'une fonction est créée à l'intérieur de la boucle. Cette forme reste la seule qui permette d'avancer de deux en deux, de reculer, ou de s'arrêter avant la fin d'un tableau.

for...of, la forme à écrire par défaut

Quand le compteur ne sert qu'à atteindre les éléments, il est du bruit. for...of parcourt directement les valeurs, sans index, sans risque de dépasser la longueur.

const paniers = [12, 30, 8];
let total = 0;

for (const montant of paniers) {
  total += montant;
}

console.log(total);   // 50

Elle fonctionne sur tout ce qui est parcourable : un Array (tableau), une chaîne, un Map, un Set. Et contrairement aux méthodes de tableau, elle accepte break et continue, ce qui la rend indispensable dès qu'un parcours doit s'interrompre.

for...in parcourt les clés, pas les valeurs

for...in énumère les noms de propriétés d'un objet. C'est la forme adaptée à un Object (objet), et exactement celle qu'il ne faut pas utiliser sur un tableau.

const client = { nom: "Alice", ville: "Lyon" };

for (const cle in client) {
  console.log(cle, client[cle]);   // nom Alice, puis ville Lyon
}

Questions fréquentes

Array.forEach() se lit bien quand le traitement doit s'appliquer à tous les éléments sans exception. Dès qu'il faut s'arrêter en cours de route, la boucle for reprend l'avantage, parce qu'aucun return placé dans le rappel de forEach n'interrompt le parcours. Pour produire une nouvelle liste plutôt que d'agir, Array.filter() ou Array.reduce() disent l'intention plus clairement qu'une boucle.

En le transformant d'abord en tableau de paires avec Object.entries(), puis en le parcourant avec for...of et une Destructuration. La clé et la valeur sont alors nommées dès la première ligne, au lieu d'obliger à écrire un accès indexé à chaque usage.

const stock = { pomme: 3, poire: 0 };

for (const [produit, quantite] of Object.entries(stock)) {
  console.log(produit, quantite);
}

Un break ne quitte que la boucle qui le contient directement. Pour sortir des deux d'un coup, on pose une étiquette devant la boucle extérieure et on écrit break suivi de ce nom. La solution souvent plus lisible consiste à déplacer les deux boucles dans une fonction et à en sortir par return. Notre formation JavaScript travaille ces arbitrages sur des parcours de données réels.