forEach()

La méthode forEach() permet de parcourir une collection et d’exécuter une fonction pour chaque élément.

Elle est souvent utilisée avec :

• Les tableaux
• Les Maps
• Les collections DOM

1. Syntaxe avec un tableau

const fruits = ["apple", "banana", "orange"];

fruits.forEach((fruit) => {

    console.log(fruit);

});

2. Comment lire forEach()

fruits.forEach((fruit) => {

    console.log(fruit);

});

On peut lire ce code comme :

« Pour chaque fruit dans fruits, exécute cette fonction. »

3. Le paramètre représente l’élément actuel

À chaque tour, le paramètre reçoit une valeur différente du tableau.

const numbers = [10, 20, 30];

numbers.forEach((number) => {

    console.log(number);

});

Ici, number reçoit successivement 10, 20 puis 30.

4. Récupérer l’index

forEach() peut aussi recevoir l’index de l’élément.

const fruits = ["apple", "banana"];

fruits.forEach((fruit, index) => {

    console.log(index);
    console.log(fruit);

});

Le premier paramètre est la valeur. Le deuxième paramètre est l’index.

5. Récupérer le tableau complet

forEach() peut recevoir trois paramètres :

fruits.forEach((fruit, index, array) => {

    console.log(fruit);
    console.log(index);
    console.log(array);

});

6. forEach() avec une fonction séparée

On peut aussi donner une fonction déjà déclarée à forEach().

function displayFruit(fruit) {

    console.log(fruit);

}

fruits.forEach(displayFruit);

Cette approche est pratique quand la logique est plus longue.

7. forEach() avec une Map

Une Map peut aussi être parcourue avec forEach().

const cart = new Map();

cart.set("apple", 2);
cart.set("banana", 1);

cart.forEach((quantity, item) => {

    console.log(item);
    console.log(quantity);

});

Attention : dans une Map, le premier paramètre est la valeur, puis la clé.

8. forEach() avec le DOM

forEach() est utile avec querySelectorAll().

const buttons = document.querySelectorAll("button");

buttons.forEach((button) => {

    button.addEventListener("click", () => {

        console.log("Bouton cliqué");

    });

});

Ici, chaque bouton reçoit son propre événement click.

9. forEach() ne retourne pas de nouveau tableau

Contrairement à map(), forEach() ne retourne pas un nouveau tableau.

const numbers = [1, 2, 3];

const result = numbers.forEach((number) => {

    return number * 2;

});

console.log(result);

10. forEach() vs map()

11. break ne fonctionne pas dans forEach()

On ne peut pas arrêter un forEach() avec break.

fruits.forEach((fruit) => {

    if (fruit === "banana") {

        break; // Erreur

    }

});

Si tu dois utiliser break, préfère une boucle for...of.

12. Quand utiliser forEach()

Utilise forEach() lorsque tu veux faire une action pour chaque élément.

• Afficher chaque valeur
• Ajouter un événement à plusieurs boutons
• Modifier plusieurs éléments DOM
• Parcourir une Map simplement

13. Quand éviter forEach()

Évite forEach() lorsque tu veux :

• Créer un nouveau tableau → utilise map()
• Filtrer des valeurs → utilise filter()
• Réduire à une seule valeur → utilise reduce()
• Arrêter la boucle avec break → utilise for...of

14. Bonnes pratiques

• Utiliser forEach() pour exécuter une action
• Utiliser map() pour transformer un tableau
• Utiliser for...of si tu as besoin de break ou continue
• Nommer clairement le paramètre
• Éviter de mettre trop de logique dans le callback

Résumé rapide