Comment parcourir un tableau en JavaScript : forEach, for...of et autres méthodes

Pourquoi "parcourir un tableau" est une base à connaître par cœur

Imaginez : vous avez une liste d'étudiants, un panier d'achats ou un ensemble de nombres. Vous devez faire quelque chose avec chaque élément : afficher un nom, calculer une somme, filtrer uniquement les adultes. En JavaScript, il existe plusieurs façons de le faire, et la plus populaire est la boucle forEach.

La question "Loop (for each) over an array in JavaScript" sur Stack Overflow a rassemblé des milliers de vues. Cela signifie que même les développeurs expérimentés se perdent parfois dans les nuances. Nous allons tout décomposer : du classique for au moderne for...of et au puissant forEach. Vous apprendrez quand utiliser chaque méthode et cesserez d'avoir peur des tableaux.

Méthode n°1 : La boucle for classique — le grand-père de tous les parcours

La méthode la plus ancienne et la plus compréhensible. Vous gérez vous-même le compteur et la condition de sortie. Idéal lorsque vous devez interrompre la boucle prématurément ou sauter plusieurs éléments.

const fruits = ['pomme', 'banane', 'orange'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`Fruit n°${i + 1} : ${fruits[i]}`);
}

Avantages : contrôle total, possibilité d'utiliser break et continue.
\nInconvénients : verbeux, facile de se tromper dans les indices.

Quand utiliser le for classique

\n
• Vous devez arrêter le parcours prématurément (par exemple, lors de la recherche d'un élément).
\n
• Vous avez besoin d'accéder à l'indice (pas seulement à la valeur).
\n
• Vous travaillez avec des tableaux multidimensionnels.
\n

Méthode n°2 : forEach — le roi des parcours en JavaScript

Cette méthode est la réponse à la question "Loop (for each) over an array in JavaScript" dans 90% des cas. Elle est appelée directement sur le tableau et prend une fonction de rappel (callback) qui est exécutée pour chaque élément.

const fruits = ['pomme', 'banane', 'orange'];
fruits.forEach(function(fruit, index) {
    console.log(`Fruit n°${index + 1} : ${fruit}`);
});

// Pareil avec une fonction fléchée (style moderne) :
fruits.forEach((fruit, index) => {
    console.log(`Fruit n°${index + 1} : ${fruit}`);
});

Important : forEach ne retourne pas un nouveau tableau (contrairement à map). Il exécute simplement une action pour chaque élément. Et oui, break et continue ne fonctionnent pas ici — si vous devez interrompre la boucle, utilisez for...of ou le for classique.

Paramètres de la fonction callback de forEach

\n
• Premier paramètre — l'élément courant du tableau (obligatoire).
\n
• Deuxième paramètre — l'indice de l'élément (optionnel).
\n
• Troisième paramètre — le tableau lui-même (rarement nécessaire).
\n

[10, 20, 30].forEach((value, index, array) => {
    console.log(`Élément ${value} à la position ${index} dans le tableau [${array}]`);
});

Méthode n°3 : for...of — moderne et élégant

Apparu en ES6 (2015) et immédiatement adopté par les développeurs. Il fonctionne non seulement avec les tableaux, mais aussi avec tous les objets itérables (chaînes, Set, Map).

const fruits = ['pomme', 'banane', 'orange'];
for (const fruit of fruits) {
    console.log(`Fruit : ${fruit}`);
}

Principal avantage : possibilité d'utiliser break et continue. De plus, le code est propre et lisible.

Comment obtenir l'indice dans for...of

Si vous avez besoin de l'indice, utilisez la méthode entries() :

for (const [index, fruit] of fruits.entries()) {
    console.log(`Fruit n°${index + 1} : ${fruit}`);
}

Méthode n°4 : map — quand vous devez créer un nouveau tableau

Si vous voulez non seulement parcourir, mais transformer chaque élément et obtenir un nouveau tableau de même longueur, utilisez m