Boucle for en JavaScript : guide complet pour débuter

Quand j’ai commencé à coder en JavaScript en 2014, la boucle for a été l’une des premières structures que j’ai dû maîtriser. Après plus de dix ans de développement web, je la considère toujours comme un fondamental incontournable. Que vous débutiez ou que vous souhaitiez consolider vos bases, comprendre la boucle for en JavaScript est indispensable pour manipuler des données, parcourir des tableaux et automatiser des traitements répétitifs.

Dans ce guide, je vous accompagne pas à pas : de la syntaxe de base aux variantes avancées, en passant par les erreurs classiques que je vois régulièrement en revue de code. Mon objectif est que vous repartiez avec une compréhension solide et applicable immédiatement dans vos projets.

Comprendre la boucle for en JavaScript

La boucle for est une structure de contrôle qui permet de répéter un bloc d’instructions un nombre défini de fois. C’est le mécanisme fondamental d’itération dans pratiquement tous les langages de programmation, et JavaScript ne fait pas exception.

Concrètement, une boucle for exécute trois opérations à chaque cycle :

1. L’initialisation : on déclare et on initialise une variable compteur (exécutée une seule fois)
2. La condition : on vérifie si la boucle doit continuer (évaluée avant chaque itération)
3. L’incrémentation : on met à jour le compteur (exécutée après chaque itération)

Dans mon expérience quotidienne, j’utilise la boucle for principalement pour parcourir des tableaux, générer des séries de données, et effectuer des opérations de transformation sur des collections. C’est un outil polyvalent que tout développeur JavaScript doit absolument maîtriser avant de passer aux méthodes fonctionnelles comme map() ou filter().

Syntaxe de la boucle for classique

La syntaxe de la boucle for classique en JavaScript se décompose en trois expressions séparées par des points-virgules, le tout placé entre parenthèses :

for (initialisation; condition; incrémentation) {
  // bloc de code à exécuter
}

Voici un exemple concret que j’utilise souvent pour expliquer le mécanisme :

for (let i = 0; i < 5; i++) {
  console.log('Itération numéro ' + i);
}
// Affiche : Itération numéro 0, 1, 2, 3, 4

Décortiquons chaque partie :

• let i = 0 : on déclare la variable i avec la valeur initiale 0. J’utilise toujours let plutôt que var pour limiter la portée de la variable au bloc de la boucle.
• i < 5 : tant que i est inférieur à 5, la boucle continue. Dès que cette condition renvoie false, la boucle s’arrête.
• i++ : après chaque itération, i augmente de 1. On peut aussi utiliser i += 2 pour avancer de deux en deux, ou i-- pour décrémenter.

Un point important que je rappelle toujours à mes collègues juniors : la boucle for peut aussi décrémenter. C’est utile quand on supprime des éléments d’un tableau en le parcourant :

for (let i = 10; i >= 0; i--) {
  console.log('Compte à rebours : ' + i);
}

On peut également omettre une ou plusieurs expressions. Par exemple, une boucle infinie s’écrit for (;;) {}. En pratique, c’est rare et je le déconseille car cela nuit à la lisibilité. Préférez toujours une syntaxe explicite.

Les variantes : for…in, for…of et forEach

JavaScript ne se limite pas à la boucle for classique. Au fil des versions du langage, plusieurs variantes ont été introduites pour répondre à des besoins spécifiques. Voici les trois que j’utilise au quotidien.

La boucle for…in : parcourir les propriétés d’un objet

La boucle for…in itère sur les propriétés énumérables d’un objet. C’est la méthode que je privilégie pour explorer la structure d’un objet JavaScript :

const utilisateur = {
  nom: 'Renard',
  prenom: 'Thomas',
  metier: 'Développeur'
};

for (const propriete in utilisateur) {
  console.log(propriete + ' : ' + utilisateur[propriete]);
}
// Affiche : nom : Renard, prenom : Thomas, metier : Développeur

Attention : n’utilisez jamais for…in pour parcourir un tableau. Cette boucle itère sur les indices sous forme de chaînes et peut inclure des propriétés héritées du prototype, ce qui provoque des bugs difficiles à déboguer.

La boucle for…of : parcourir les valeurs itérables

Introduite avec ES6, la boucle for…of est ma préférée pour parcourir des tableaux, des chaînes de caractères, des Map, des Set et tout objet itérable :

const langages = ['JavaScript', 'PHP', 'Python'];

for (const langage of langages) {
  console.log(langage);
}
// Affiche : JavaScript, PHP, Python

L’avantage par rapport à la boucle classique : pas besoin de gérer un index manuellement. Le code est plus lisible et moins sujet aux erreurs de type off-by-one.

La méthode forEach : l’approche fonctionnelle

La méthode forEach() est rattachée au prototype Array. Elle exécute une fonction callback pour chaque élément du tableau :

const prix = [29.99, 49.99, 19.99];

prix.forEach(function(valeur, index) {
  console.log('Produit ' + index + ' : ' + valeur + ' €');
});

Je l’utilise quand je n’ai pas besoin de break ou continue, car forEach ne permet pas d’interrompre l’itération. C’est sa principale limitation par rapport aux boucles for classiques. Si vous travaillez avec des méthodes comme splice en JavaScript, la boucle for classique reste souvent plus adaptée pour modifier un tableau en cours de parcours.

Parcourir un tableau avec une boucle for

Le parcours de tableau est le cas d’usage le plus fréquent de la boucle for en JavaScript. Voici les différentes approches que j’utilise selon le contexte.

Parcours classique avec index

const fruits = ['pomme', 'banane', 'cerise', 'datte'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Cette approche donne un contrôle total : vous pouvez sauter des éléments, parcourir à l’envers, ou accéder aux éléments voisins (fruits[i-1], fruits[i+1]).

Parcours optimisé : mettre en cache la longueur

Un conseil que je donne systématiquement en revue de code : mettez en cache la longueur du tableau quand vous travaillez avec de grands jeux de données :

const donnees = [/* tableau de 10 000 éléments */];

// Version optimisée
for (let i = 0, longueur = donnees.length; i < longueur; i++) {
  // traitement
}

En stockant donnees.length dans une variable, on évite que le moteur JavaScript recalcule la propriété length à chaque itération. Sur un tableau de 100 000 éléments, le gain peut atteindre 15 à 20 % selon le navigateur.

Parcours avec for…of et destructuration

Pour un code plus élégant, je combine souvent for…of avec la méthode entries() :

const produits = ['Clavier', 'Souris', 'Écran'];

for (const [index, produit] of produits.entries()) {
  console.log(`${index + 1}. ${produit}`);
}
// Affiche : 1. Clavier, 2. Souris, 3. Écran

Cette syntaxe combine la lisibilité de for…of avec l’accès à l’index, le meilleur des deux mondes.

Rechercher un élément dans un tableau

Avant ES6, la boucle for était le moyen standard de chercher un élément. Aujourd’hui, pour vérifier si un élément existe, la méthode includes() est plus directe. Mais la boucle for reste pertinente pour des recherches complexes avec conditions multiples :

const utilisateurs = [
  { nom: 'Alice', age: 28 },
  { nom: 'Bob', age: 34 },
  { nom: 'Claire', age: 22 }
];

let resultat = null;
for (let i = 0; i < utilisateurs.length; i++) {
  if (utilisateurs[i].age > 30) {
    resultat = utilisateurs[i];
    break; // on arrête dès qu'on trouve
  }
}

Le mot-clé break est essentiel ici : il stoppe la boucle immédiatement dès que la condition est remplie, évitant de parcourir inutilement le reste du tableau.

Imbriquer des boucles for

L’imbrication de boucles for consiste à placer une boucle à l’intérieur d’une autre. C’est indispensable pour traiter des structures de données multidimensionnelles comme les matrices, les grilles ou les tableaux de tableaux.

Exemple : parcourir une matrice

const matrice = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let ligne = 0; ligne < matrice.length; ligne++) {
  for (let colonne = 0; colonne < matrice[ligne].length; colonne++) {
    console.log(`Position [${ligne}][${colonne}] = ${matrice[ligne][colonne]}`);
  }
}

La boucle externe parcourt les lignes, la boucle interne parcourt les colonnes de chaque ligne. Pour une matrice de 3×3, on obtient 9 itérations au total (3 × 3).

Générer des combinaisons

Les boucles imbriquées sont aussi utiles pour générer toutes les paires possibles d’un ensemble :

const couleurs = ['rouge', 'vert', 'bleu'];
const tailles = ['S', 'M', 'L'];

for (const couleur of couleurs) {
  for (const taille of tailles) {
    console.log(`${couleur} - ${taille}`);
  }
}
// Affiche 9 combinaisons : rouge-S, rouge-M, rouge-L, vert-S...

Précautions sur les performances

Chaque niveau d’imbrication multiplie le nombre d’itérations. Deux boucles de 1 000 éléments chacune donnent 1 000 000 d’itérations. Trois niveaux avec 100 éléments chacun produisent 1 000 000 d’itérations. Dans mon expérience, au-delà de deux niveaux d’imbrication, il faut se demander si l’algorithme peut être repensé avec des Map, des Set, ou des méthodes comme flatMap().

Labels pour contrôler les boucles imbriquées

JavaScript offre un mécanisme peu connu : les labels. Ils permettent de cibler un break ou continue sur une boucle externe spécifique :

externe: for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    if (i + j > 4) {
      break externe; // sort des DEUX boucles
    }
    console.log(i, j);
  }
}

J’utilise les labels rarement, mais ils peuvent éviter l’ajout d’une variable booléenne de contrôle dans certaines situations.

Erreurs fréquentes et pièges à éviter

Après des années de revue de code, voici les erreurs que je rencontre le plus souvent avec les boucles for en JavaScript.

L’erreur off-by-one

C’est le classique absolu. Un tableau de 5 éléments a des indices de 0 à 4, pas de 0 à 5 :

const tab = ['a', 'b', 'c', 'd', 'e'];

// ERREUR : i <= tab.length accède à tab[5] qui vaut undefined
for (let i = 0; i <= tab.length; i++) {
  console.log(tab[i]);
}

// CORRECT : i < tab.length
for (let i = 0; i < tab.length; i++) {
  console.log(tab[i]);
}

Utilisez toujours < et non <= quand vous comparez avec .length.

Modifier un tableau pendant le parcours

Ajouter ou supprimer des éléments en cours d’itération est une source de bugs fréquente :

const nombres = [1, 2, 3, 4, 5];

// PROBLÈME : splice décale les indices
for (let i = 0; i < nombres.length; i++) {
  if (nombres[i] % 2 === 0) {
    nombres.splice(i, 1);
    // l'élément suivant prend l'index courant, il sera sauté
  }
}

// SOLUTION : parcourir en sens inverse
for (let i = nombres.length - 1; i >= 0; i--) {
  if (nombres[i] % 2 === 0) {
    nombres.splice(i, 1);
  }
}

Utiliser var au lieu de let

Avec var, la variable de boucle est hissée dans la portée de la fonction, ce qui provoque des comportements inattendus, notamment avec les callbacks asynchrones :

// PROBLÈME : affiche 5 cinq fois
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // i vaut toujours 5
  }, 100);
}

// SOLUTION : let crée une portée par itération
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // affiche 0, 1, 2, 3, 4
  }, 100);
}

Depuis ES6, je recommande toujours let dans les boucles for. Si vous développez avec un framework moderne comme React ou Angular, cette pratique est encore plus importante car les closures y sont omniprésentes.

La boucle infinie accidentelle

Oublier l’incrémentation ou écrire une condition qui ne devient jamais fausse bloque l’onglet du navigateur :

// DANGER : boucle infinie !
for (let i = 0; i < 10; ) {
  console.log(i);
  // Oubli de i++
}

Si votre page se fige, c’est souvent une boucle infinie. Les DevTools de Chrome permettent de forcer l’arrêt du script via l’onglet Sources.

Optimiser les performances de vos boucles

Sur des petits tableaux de quelques dizaines d’éléments, l’optimisation n’a aucun impact mesurable. En revanche, dès que vous manipulez des milliers d’entrées, chaque micro-optimisation compte.

Réduire le travail dans le corps de la boucle

Le corps de la boucle est exécuté à chaque itération. Tout calcul qui ne change pas entre les itérations doit être sorti :

// AVANT : document.getElementById appelé 1000 fois
for (let i = 0; i < 1000; i++) {
  document.getElementById('resultat').innerHTML += i + ' ';
}

// APRÈS : un seul accès au DOM
let html = '';
for (let i = 0; i < 1000; i++) {
  html += i + ' ';
}
document.getElementById('resultat').innerHTML = html;

Les accès au DOM sont particulièrement coûteux. Je regroupe toujours les modifications et j’applique le résultat final en une seule opération.

Préférer les méthodes natives quand c’est possible

Les moteurs JavaScript optimisent les méthodes natives comme map(), filter() et reduce(). Pour des transformations simples, elles sont souvent aussi rapides qu’une boucle for et beaucoup plus lisibles :

const nombres = [1, 2, 3, 4, 5];

// Boucle for
const doubles = [];
for (let i = 0; i < nombres.length; i++) {
  doubles.push(nombres[i] * 2);
}

// Équivalent avec map (plus concis)
const doublesMap = nombres.map(n => n * 2);

En revanche, si vous avez besoin de break pour interrompre le parcours, restez sur une boucle for classique ou for…of.

Éviter les allocations inutiles

Créer des objets ou des tableaux à l’intérieur d’une boucle génère une pression sur le ramasse-miettes (garbage collector). Réutilisez les variables quand c’est possible :

// ÉVITER : nouvel objet à chaque itération
for (let i = 0; i < 10000; i++) {
  const config = { mode: 'production', index: i };
  traiter(config);
}

// PRÉFÉRER : réutiliser l'objet
const config = { mode: 'production', index: 0 };
for (let i = 0; i < 10000; i++) {
  config.index = i;
  traiter(config);
}

Boucle for vs while : quand utiliser chacune

La question revient souvent : faut-il utiliser for ou while ? Ma règle est simple :

• for : quand vous connaissez à l’avance le nombre d’itérations ou quand vous parcourez une collection de taille connue
• while : quand la condition d’arrêt dépend d’un événement imprévisible (lecture de flux, attente d’un état, recherche sans borne connue)

// for : nombre d'itérations connu
for (let i = 0; i < utilisateurs.length; i++) {
  envoyerEmail(utilisateurs[i]);
}

// while : on ne sait pas quand la condition sera remplie
let tentatives = 0;
while (!connexionReussie && tentatives < 10) {
  connexionReussie = tenterConnexion();
  tentatives++;
}

Il existe aussi la variante do…while qui garantit au moins une exécution du bloc avant de vérifier la condition. Je l’utilise rarement, mais elle est utile pour les menus interactifs ou la validation de saisie.

En pratique, la boucle for couvre 80 % de mes besoins d’itération. Le while intervient surtout dans du code asynchrone ou des algorithmes de recherche. Si vous débutez avec les conditions en JavaScript, je vous recommande de bien maîtriser les structures if avant de vous attaquer aux boucles complexes.

Exemples pratiques et cas concrets

Terminons avec des exemples issus de situations réelles que je rencontre dans mes projets.

Générer un tableau HTML dynamiquement

const produits = [
  { nom: 'Hébergement VPS', prix: 9.99 },
  { nom: 'Nom de domaine', prix: 12.50 },
  { nom: 'Certificat SSL', prix: 0 }
];

let tableauHTML = '<table><tr><th>Produit</th><th>Prix</th></tr>';

for (const produit of produits) {
  tableauHTML += `<tr><td>${produit.nom}</td><td>${produit.prix} €</td></tr>`;
}

tableauHTML += '</table>';
document.getElementById('catalogue').innerHTML = tableauHTML;

Ce type de construction dynamique est courant quand on reçoit des données d’une API. Si vous travaillez sur un site WordPress, ce genre de script s’intègre facilement dans un thème personnalisé. Pour aller plus loin sur l’optimisation de vos sites WordPress, consultez mon guide technique SEO pour WordPress.

Filtrer et transformer des données

const commandes = [
  { id: 1, montant: 45, statut: 'payée' },
  { id: 2, montant: 120, statut: 'en attente' },
  { id: 3, montant: 89, statut: 'payée' },
  { id: 4, montant: 200, statut: 'annulée' },
  { id: 5, montant: 55, statut: 'payée' }
];

let totalPayees = 0;
const idsPayees = [];

for (const commande of commandes) {
  if (commande.statut === 'payée') {
    totalPayees += commande.montant;
    idsPayees.push(commande.id);
  }
}

console.log(`Total des commandes payées : ${totalPayees} €`);
console.log(`IDs concernés : ${idsPayees.join(', ')}`);
// Total : 189 €, IDs : 1, 3, 5

Valider un formulaire champ par champ

const champs = document.querySelectorAll('.champ-requis');
let formulaireValide = true;

for (const champ of champs) {
  if (champ.value.trim() === '') {
    champ.classList.add('erreur');
    formulaireValide = false;
  } else {
    champ.classList.remove('erreur');
  }
}

if (!formulaireValide) {
  alert('Veuillez remplir tous les champs obligatoires.');
}

Ici, for…of fonctionne parfaitement avec les NodeList retournées par querySelectorAll, ce qui n’est pas le cas de forEach dans tous les navigateurs anciens.

Manipuler des chaînes de caractères

Les chaînes sont itérables en JavaScript. On peut les parcourir caractère par caractère avec for…of, ce qui est utile pour le nettoyage de texte ou la manipulation de données. La méthode trimEnd en JavaScript est un bon complément pour nettoyer les espaces en fin de chaîne avant traitement.

const phrase = 'Bonjour le monde';
let compteurVoyelles = 0;
const voyelles = 'aeiouyàâéèêëïîôùûü';

for (const caractere of phrase.toLowerCase()) {
  if (voyelles.includes(caractere)) {
    compteurVoyelles++;
  }
}

console.log(`Nombre de voyelles : ${compteurVoyelles}`);
// Affiche : Nombre de voyelles : 6

Implémenter un algorithme de tri simple

Le tri à bulles (bubble sort) est un exemple classique d’utilisation de boucles imbriquées. Même si en production on utilise Array.sort(), c’est un excellent exercice pour comprendre les boucles :

function triBulles(tableau) {
  const n = tableau.length;
  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (tableau[j] > tableau[j + 1]) {
        // Échange des éléments
        const temp = tableau[j];
        tableau[j] = tableau[j + 1];
        tableau[j + 1] = temp;
      }
    }
  }
  return tableau;
}

console.log(triBulles([64, 34, 25, 12, 22, 11, 90]));
// [11, 12, 22, 25, 34, 64, 90]

Cet algorithme a une complexité de O(n²), ce qui illustre pourquoi les boucles imbriquées doivent être utilisées avec prudence sur de grands ensembles de données. Pour des applications critiques en performance, comme celles hébergées sur un serveur VPS, l’optimisation des boucles peut faire une réelle différence.

Sources et references : pour approfondir, consultez documentation officielle MDN sur la boucle for, guide MDN sur les boucles et itérations en JavaScript et présentation du langage JavaScript sur Wikipédia.