Un array (tableau en anglais) est un type de variables qui peut contenir plusieurs valeurs. L’objet array est natif en javascript et possède donc ses propres propriétés et méthodes, parmi lesquelles, la méthode .forEach() (array.forEach()). Cette méthode permet d’opérer une itération sur les éléments ou les propriétés d’un tableau. En d’autres termes, on va exécuter une fonction donnée sur chaque élément du tableau et dans l’ordre croissant des indices.

Rappelons que lorsqu’un nouvel objet array est créé, un indice (unique) est automatiquement affecté à chaque élément de ce tableau ; ce qui est très pratique par la suite pour cibler et travailler précisément sur chacun de ces éléments.

Description

La syntaxe globale pour appeler la méthode .forEach() est la suivante :

tableau.forEach(callback);

tableau.forEach(callback, thisArg);

Donc la méthode .forEach() prend en arguments

• une fonction callback qui elle-même est appelée par défaut avec 3 paramètres en argument (valeur de l’élément, indice de l’élément, tableau).
• un paramètre optionnel qui est la valeur à utiliser pour this lors de l’exécution de callback. Sinon, ce sera la valeur undefined qui sera utilisée pour this.

L’ensemble des éléments traités par la méthode forEach() est défini avant le premier appel à callback. Si des éléments sont ajoutés au tableau après, ils ne seront pas visités par callback. Et si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu’elle est passée à la fonction callback sera la valeur au moment du passage du forEach() ; quant aux éléments supprimés, ils ne seront pas parcourus. Notons bien que la méthode forEach() ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (callback) utilisée peut modifier le tableau.

Exemples pratiques

Commençons par exemple simple. Déclarons le tableau suivant :

const myTeam = ['Leio', 'Ursula', 'Daniela', 'Gérard'];

On peut appeler notre méthode forEach() pour parcourir le tableau et appeler pour chaque élément la méthode log de l’objet console :

myTeam.forEach(console.log);

Ce qui produit le résultat suivant :

Vous voyez que par défaut pour chaque on a la valeur de l’élément, son indice et le tableau.

Ou encore appeler/afficher chaque élément de notre array.

myTeam.forEach(i => console.log(i));

À noter que le terme “i” peut prendre n’importe quel nom à la place.

Déclarons un tableau avec plus d’éléments à considérer.

const myTeam = [
  {Prénom : 'Leio', Nom : 'Ndongo'},
  {Prénom : 'Ursula', Nom : 'Kamga'},
  {Prénom : 'Daniela', Nom : 'Batam'},
  {Prénom : 'Gérard', Nom : 'Kack'},
  ];

On peut appeler notre méthode forEach() pour récupérer des valeurs du tableau par exemple :

myTeam.forEach(i => console.log(i));

On obtient le résultat suivant :

Ou encore :

myTeam.forEach(i => console.log(i.Nom));

Étudions le cas où un argument a été passé pour this.

Dans l’exemple ci-après, on tente de mettre à jour les propriétés d’un objet à partir des éléments d’un tableau.

function Compteur() {
  this.somme = 0;
  this.compte = 0;
}

Compteur.prototype.ajouter = function(tableau) {
  tableau.forEach(function(element) {
    this.somme += element;
    ++this.compte;
  },  this);
  //  ^---- Ajout de l'argument this ici.
};

var obj = new Compteur();
obj.ajouter([0, 1, 2, 3]);

console.log(obj.somme);
console.log(obj.compte);

À chaque appel du callback, celui-ci sera utilisé comme valeur pour this.

Si vous voulez allez plus en profondeur, n’hésitez pas à consulter cet article “JavaScript Object foreach comment ça marche ?“