JavaScript - La boucle for

Une boucle exécute un bloc de code plusieurs fois. La boucle for est utilisée quand on sait combien de fois on veut répéter — afficher les 10 premiers nombres, parcourir tous les éléments d'un tableau, dessiner une grille de 8×8 cases.

    5ttr 6ttr
  • niveau

La syntaxe en trois parties

for (initialisation; condition; incrément) {
    // instructions répétées
}

Les trois parties séparées par des ; :

  • initialisation — exécutée une seule fois, au début. Souvent une déclaration de compteur.
  • condition — vérifiée avant chaque tour. Tant qu'elle est vraie, la boucle continue. Si fausse, la boucle s'arrête.
  • incrément — exécuté après chaque tour, généralement pour faire avancer le compteur.
for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// affiche : 1 2 3 4 5

Déroulement :

i = 1   → 1 <= 5 ? oui → console.log(1) → i devient 2
i = 2   → 2 <= 5 ? oui → console.log(2) → i devient 3
...
i = 5   → 5 <= 5 ? oui → console.log(5) → i devient 6
i = 6   → 6 <= 5 ? non → fin de la boucle

Variations courantes

Compter de 0 à n-1

Le pattern le plus utilisé en programmation. On part de 0 et on s'arrête avant n.

for (let i = 0; i < 10; i++) {
    console.log(i);
}
// 0 1 2 3 4 5 6 7 8 9  → exactement 10 tours

Compter à rebours

for (let i = 10; i > 0; i--) {
    console.log(i);
}
// 10 9 8 7 6 5 4 3 2 1

Avancer par pas de 2

for (let i = 0; i <= 20; i += 2) {
    console.log(i);     // 0 2 4 6 ... 20
}

Parcourir un tableau

L'usage le plus courant : passer en revue chaque élément.

let fruits = ["pomme", "banane", "cerise"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
  • fruits.length vaut 3 → on tourne pour i = 0, 1, 2.
  • fruits[i] accède au i-ème élément.

Pourquoi i < fruits.length et pas i <= 2 ? Parce que le tableau peut grandir. Si on ajoute un fruit, fruits.length devient 4 automatiquement, la boucle s'adapte. Avec i <= 2 codé en dur, on oublierait de le mettre à jour. Toujours < length.


for...of — version simplifiée

Quand on veut juste chaque élément, sans s'occuper de l'index, JavaScript moderne propose une syntaxe plus lisible :

let fruits = ["pomme", "banane", "cerise"];

for (let fruit of fruits) {
    console.log(fruit);
}

Plus court, et pas de risque d'erreur d'indice. À utiliser dès que tu n'as pas besoin de i.

Quand utiliser laquelle ?

  • for classique : si tu as besoin de l'index (i), de sauter des éléments, de parcourir à rebours…
  • for...of : si tu veux juste chaque élément un par un.

break et continue

Deux mots-clés qui modifient le déroulement d'une boucle.

break — sortir immédiatement

for (let i = 0; i < 100; i++) {
    if (i === 5) {
        break;          // sort de la boucle dès que i vaut 5
    }
    console.log(i);     // 0 1 2 3 4
}

Utile quand on cherche quelque chose : dès qu'on l'a trouvé, inutile de continuer.

continue — passer au tour suivant

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;       // saute les pairs
    }
    console.log(i);     // 1 3 5 7 9
}

continue saute le reste du tour courant et passe directement à l'incrément.


Erreurs fréquentes

La boucle infinie

// ❌ i ne change jamais → boucle infinie, page bloquée
for (let i = 0; i < 10; ) {
    console.log(i);
}

Toujours vérifier que l'incrément fait progresser la condition vers la sortie.

Off-by-one (l'erreur de ±1)

// ❌ tourne 11 fois (i = 0, 1, ..., 10), pas 10
for (let i = 0; i <= 10; i++) { ... }

// ✅ tourne 10 fois (i = 0, 1, ..., 9)
for (let i = 0; i < 10; i++) { ... }

Règle simple : "j'ai N éléments, donc i < N".

Modifier le compteur dans la boucle

// ❌ Très difficile à lire, à éviter
for (let i = 0; i < 10; i++) {
    if (condition) i += 3;     // saute des tours façon "magie"
    console.log(i);
}

Si tu dois sauter des tours, utilise continue. Si tu veux changer le rythme, change l'incrément. Modifier i au milieu du corps, c'est un piège pour les futurs lecteurs (toi inclus).


Exemple complet : table de multiplication

function tableDeMultiplication(n) {
    for (let i = 1; i <= 10; i++) {
        console.log(`${n} × ${i} = ${n * i}`);
    }
}

tableDeMultiplication(7);

Et pour faire toutes les tables d'un coup, on imbrique :

for (let n = 1; n <= 10; n++) {
    console.log(`--- Table de ${n} ---`);
    for (let i = 1; i <= 10; i++) {
        console.log(`${n} × ${i} = ${n * i}`);
    }
}

Une boucle dans une boucle = on multiplie le nombre de tours. 10 × 10 = 100 lignes affichées.


À retenir

  • for (init; condition; increment) { ... } — trois parties séparées par ;.
  • Pattern standard : for (let i = 0; i < n; i++).
  • Pour parcourir un tableau sans avoir besoin de l'index : for (let element of tableau).
  • break arrête la boucle. continue saute au tour suivant.
  • Méfiance avec l'off-by-one : < pour N tours, <= pour N+1 tours.
  • Une boucle dont la condition ne devient jamais fausse = boucle infinie, page bloquée.

Pour aller plus loin