JavaScript forEach : exécuter un callback sur un tableau

Le forEach JavaScript (Array.prototype.forEach) exécute un callback une fois par élément d’un tableau, dans l’ordre des index. Utilisez une boucle JavaScript forEach pour les effets de bord, comme les logs, les mises à jour du DOM ou la mise à jour d’une variable externe, quand vous n’avez pas besoin de break ni de await. Comme il renvoie undefined, ce n’est pas le bon outil pour les transformations (map) ni pour les recherches qui peuvent s’arrêter tôt (find, some). Pour le contrôle de flux, préférez une boucle for...of.

Exemple JavaScript forEach pour l’itération de tableaux

Sortie :

0: rouge
1: vert
2: bleu

Comment cet exemple fonctionne

1. couleurs contient trois chaînes dans un tableau.
2. forEach appelle la fonction fléchée une fois par élément, en passant l’élément courant et son index en base zéro en arguments.
3. Le callback affiche chaque couleur avec sa position. forEach traite les éléments dans l’ordre croissant des index et ignore les emplacements vides dans les tableaux clairsemés.

Pièges courants de forEach

Utiliser forEach avec async/await :

Incorrect :

const urls = ["https://example.com/a", "https://example.com/b"];

urls.forEach(async (url) => {
  await fetch(url);
});
console.log("terminé"); // s'exécute immédiatement

Correct :

for (const url of urls) {
  await fetch(url);
}

forEach n’attend pas les promesses renvoyées par le callback. Utilisez for...of pour un await séquentiel, ou await Promise.all(urls.map((url) => fetch(url))) pour un travail en parallèle.

Essayer de sortir de forEach avec break :

Incorrect :

const elements = ["a", "b", "c"];
const cible = "b";

elements.forEach((element) => {
  if (element === cible) break; // SyntaxError
});

Correct :

const trouve = elements.find((element) => element === cible);

forEach ne peut pas s’arrêter avant la fin. Utilisez find/some pour les recherches avec court-circuit, ou for...of quand vous avez besoin de break.

forEach vs map vs for…of

Utilisez forEach pour les effets de bord quand vous n’avez pas besoin de sortie anticipée ni de await. Utilisez map quand le résultat attendu est un tableau transformé. Utilisez for...of quand vous avez besoin de break, continue ou d’un await séquentiel.

FAQ

Peut-on quitter JavaScript forEach avant la fin ?

Non. forEach exécute le callback pour chaque élément. Lever une exception stoppe l’itération, mais c’est un anti-pattern. Utilisez for...of avec break, ou find/some/every pour les recherches à court-circuit.

Est-ce que forEach modifie le tableau d’origine ?

forEach lui-même ne modifie pas le tableau. Le callback peut muter les éléments objets sur place parce qu’il reçoit des références, pas des copies. Les valeurs primitives comme les nombres et les chaînes sont passées par valeur et ne peuvent pas être modifiées via le paramètre du callback.

Quelle est la différence entre forEach et map ?

forEach renvoie undefined et sert aux effets de bord. map renvoie un nouveau tableau construit à partir des valeurs de retour du callback. Si l’objectif est de transformer des données, utilisez map ; si l’objectif est d’exécuter des actions comme des logs ou des mises à jour du DOM, utilisez forEach.