Boucle forEach()

La boucle forEach() permet de traitement l'ensemble des entrées dans un tableau/NodeList de façon simple. Elle est particulièrement efficace pour traiter le résultat d'une requête querySelectorAll().

Par exemple, une variable contenant tous les éléments possédant la classe .book:

const booksArr = document.querySelectorAll('.book');
// NodeList(3) [div.book, div.book, div.book]

Le résultat de cette requête est une NodeList qui est en quelques sorte un tableau simplifié.

Pour afficher tous les éléments un à un dans la console avec une boucle for(), il faudrait procéder de la sorte:

for (let index = 0; index < booksArr.length; index++) {
  const book = booksArr[index];
  console.log(book);
}

Heureusement, il est possible de simplifier le tout via une boucle forEach().

Par exemple:

booksArr.forEach(function(book) {
  console.log(book)
});

Anatomie

Voyons les parties constituant la boucle forEach.

booksArr

Nom du tableau ou NodeList à parcourir.

.forEach()

Se traduisant littéralement par "pour chaque", permets d'indiquer que chaque entrée constituant le tableau doit être accéder séparément.

function(book)

Fonction anonyme à exécuter pour chaque entrée dans le tableau. Le mot book est un paramètre passé à la fonction contenant à chaque itération de la boucle l'entrée courante. Soit l'équivalent de const book = booksArr[index];

Dans cet exemple, la paramètre a été nommé book, puisqu'il est logique d'appeler une entrée dans un tableau de livres, un livre. Cependant, il est important de comprendre qu'il s'agit d'un nom arbitraire. Le paramètre aurait pu porter le nom de votre choix.

Par exemple le code suivant produit exactement le même résultat même si le nom du paramètre est différent:

booksArr.forEach(function(batman) {
  console.log(batman)
});

{...}

Les parenthèses contiennent le code à exécuter à chaque itération de la boucle.

Dans cet exemple, le code consiste simplement à afficher l'entrée courante dans la console .

Index

Si désiré, il est possible de spécifier un deuxième paramètre dans la fonction d'une boucle forEach(). Ce deuxième paramètre correspond à l'index courant dans la boucle.

Par exemple:

const officeArr = ["Pam", "Jim", "Dwight"];

officeArr.forEach(function(who, index) {
  console.log(who, index);
});

// Pam, 0
// Jim, 1
// Dwight, 2