Boucle for JavaScript : parcourir un tableau par index

La boucle for JavaScript répète un bloc de code un nombre contrôlé de fois avec trois expressions : initialisation, condition et mise à jour. Utilisez-la quand vous avez besoin de l’index de boucle, pour accéder aux positions d’un tableau, comparer des éléments voisins ou compter des itérations. Contrairement à forEach ou for...of, l’instruction for classique de JavaScript donne un contrôle direct sur les valeurs de départ, de fin et de pas.

Exemple de boucle for JavaScript pour itérer un tableau

Sortie :

Étape 0: compiler
Étape 1: tester
Étape 2: deployer

Comment cet exemple fonctionne

1. let i = 0 crée un compteur à portée de bloc qui démarre au premier index du tableau.
2. i < taches.length vérifie la condition avant chaque itération. La boucle s’arrête quand i atteint taches.length, ce qui évite une lecture hors limites.
3. i++ incrémente le compteur après l’exécution du corps de chaque itération.
4. taches[i] lit l’élément à la position i, en associant chaque valeur à son index.

La borne < length (et non <=) est le modèle standard, car les index d’un tableau vont de 0 à length - 1.

Erreurs courantes dans les boucles for JavaScript

Erreur de limite avec <=

Incorrect :

const items = ["a", "b", "c"];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i]);
}

Correct :

const items = ["a", "b", "c"];
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

<= exécute une itération de trop, donc items[items.length] vaut undefined.

Utiliser var dans des callbacks asynchrones

Incorrect :

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// affiche : 3, 3, 3

Correct :

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// affiche : 0, 1, 2

var a une portée de fonction, donc les callbacks lisent la valeur finale de i. let crée une nouvelle liaison à chaque itération.

Boucle for vs for…of

Par défaut, privilégiez for...of ; passez à une boucle for classique quand vous avez besoin de l’index ou d’un pas non séquentiel.

Plus d’exemples

Sortie anticipée avec break :

const temperatures = [22, 18, 35, 29];
for (let i = 0; i < temperatures.length; i++) {
  if (temperatures[i] > 30) {
    console.log("Premier jour chaud à l'index", i);
    break;
  }
}

break arrête la boucle immédiatement. Sans lui, la boucle continuerait de vérifier tous les éléments restants après avoir trouvé la première correspondance.

Ignorer des itérations avec continue :

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
// 0, 1, 3, 4

continue saute le reste du corps de l’itération en cours, mais exécute quand même l’expression de mise à jour (i++) avant la prochaine vérification de condition.

FAQ

Quelle est la syntaxe d’une boucle for en JavaScript ?

Une instruction for JavaScript a trois expressions optionnelles : for (init; condition; update). L’initialisation s’exécute une seule fois avant le début de la boucle, la condition est évaluée avant chaque itération, et la mise à jour s’exécute après chaque corps de boucle. Les trois sont optionnelles : omettre la condition crée une boucle infinie qu’il faut quitter avec break.

Boucle while ou for en JavaScript : quand utiliser laquelle ?

Utilisez une boucle for quand l’initialisation, la condition et la mise à jour concernent le même compteur : les regrouper sur une seule ligne rend les bornes de boucle immédiatement visibles. Utilisez while quand la condition de sortie dépend d’un état externe, ou quand la logique d’initialisation et de mise à jour appartient au corps de boucle plutôt qu’à l’en-tête.

Comment arrêter une boucle for JavaScript avant la fin ?

Placez une instruction break dans le corps de la boucle. Quand le moteur rencontre break, il quitte immédiatement la boucle et reprend l’exécution après l’accolade fermante. Combinez break avec une condition pour arrêter dès qu’une valeur cible est trouvée, et éviter des itérations inutiles.