JavaScript Object foreach comment ça marche ?

forEach() est une méthode d’itération. Elle est généralement utilisée pour l’exécution en série de fonctionnalités sur une liste d’éléments. Elle a été introduite dans ECMAScript 5 (ES5) et est prise en charge par tous les navigateurs modernes.

Cet article décrit comment utiliser la méthode forEach() pour itérer les éléments d’un tableau en JavaScript. De plus, vous découvrirez les meilleures pratiques de forEach(), comme la gestion correcte de cette méthode et la façon d’itérer des objets de type tableau.

Comment utiliser forEach() pour itérer les élément d’un tableau en JavaScript ?

Exemple d’utilisation basique de forEach

« La méthode array.forEach() itère sur les éléments du tableau, dans l’ordre croissant, sans modifier le tableau. »

Le premier argument de forEach() est la fonction de rappel appelée pour chaque élément du tableau. Le second argument (facultatif) est la valeur de cet ensemble dans la fonction de rappel.

array.forEach(rappel [, cetArgument])

Le code suivant démontre comment imprimer tous les éléments d’un tableau en utilisant forEach()

const arr = [1, 'two',];
arr.forEach(item => console.log(item)); 
// Sortie attendue:
// 1 
// two

Remarque : Cet exemple utilise une syntaxe abrégée.

La méthode forEach() exécute une fonction une fois pour chaque élément du tableau. La méthode est appelée sur l’objet tableau que vous souhaitez manipuler, et la fonction à appeler est fournie en argument.

Dans le code ci-dessus, console.log() est invoquée pour chaque élément du tableau.

Voyons comment forEach() fonctionne en pratique. Dans l’exemple ci-après, le tableau des couleurs a 3 objets. Utilisons forEach() pour enregistrer chaque couleur dans la console :

const colors = ['bleu', vert, blanc];
function iterate(item) {
  console.log(item);
}
colors.forEach(iterate);
// logs "bleu"
// logs "vert"
// logs "blanc"

iterate est la fonction de rappel. colors.forEach(iterate) exécute la fonction iterate pour chaque élément de colors, en définissant l’élément itéré comme premier argument.

De cette façon, 3 invocations de la fonction iterate() sont effectuées :

• iterate(‘bleu’)
• iterate(‘vert’)
• itérer(‘blanc’)

Comment récupérer l’Index d’un élément itéré ?

array.forEach(callback) exécute la fonction callback avec 3 arguments : l’élément itéré actuel, l’index de l’élément itéré et l’instance du tableau elle-même.

array.forEach(callback(item [, index [, array]]))

Essayons d’accéder à l’index de chaque élément d’un tableau des couleurs :

const colors = ['bleu', 'vert', blanc];
function iterate(item, index) {
  console.log(`${item} has index ${index}`);
}
colors.forEach(iterate);
// logs "le bleu a l’index 0"
// logs "le vert a l’index 1"
// logs "le blanc a l’index 2"

La fonction iterate() a accès à l’élément itéré actuel et à l’index. Le callback est exécuté 3 fois :

• iterate(‘bleu’, 0)
• iterate(‘vert’, 1)
• iterate(‘blanc’, 2)

Comment accéder à un tableau dans un callback ?

Pour accéder au tableau lui-même pendant l’itération, vous pouvez utiliser le 3ème paramètre dans la fonction de rappel.

Enregistrons le message « Ceci est la dernière itération ! » lorsque JavaScript exécute la dernière itération sur les éléments du tableau.

const colors = ['bleu', 'vert', 'blanc'];
function iterate(item, index, array) {
  console.log(item);
  if (index === array.length - 1) {
    console.log(‘Ceci est la dernière iteration !');
  }
}
colors.forEach(iterate);
// logs "bleu"
// logs "vert"
// logs "blanc"
// logs "Ceci est la dernière itération !"

La méthode forEach() ignore t-elle les emplacements vides ?

La méthode forEach() saute les emplacements vides du tableau (appelé tableau clairsemé).

const sparseArray = [1, , 3];
sparseArray.length; // => 3
sparseArray.forEach(function(item) {
  console.log(item);
}); 
// logs 1, 3

sparseArray contient 1, un emplacement vide et 3. forEach() itère sur 1 et 3, mais ignore l’emplacement vide.

Comment interroger des objets de type tableau en utilisant forEach() ?

forEach() peut itérer sur des objets de type tableau :

const arrayLikeColors = {
  "0": "bleu",
  "1": "vert",
  "2": "blanc",
  "length": 3
};
function iterate(item) {
  console.log(item);
}
Array.prototype.forEach.call(arrayLikeColors, iterate);
// logs "bleu"
// logs "vert"
// logs "blanc"

arrayLikeColors est un objet de type tableau. Afin d’itérer sur ses éléments, vous devez appeler indirectement forEach() à l’aide de la méthode call(). La méthode forEach() est tirée de Array.prototype.

Sinon, vous pouvez transformer l’objet de type tableau en un tableau en utilisant Array.from(), puis itérer :

const arrayLikeColors = {
  "0": "bleu",
  "1": "vert",
  "2": "blanc",
  "length": 3
};
function iterate(item) {
  console.log(item);
}
Array.from(arrayLikeColors).forEach(iterate);
// logs "bleu"
// logs "vert"
// logs "blanc"

Quelle différence existe entre forEach(),  map(), filter() et reduce() ?

JavaScript fournit un certain nombre de méthodes d’itération, forEach(), map(), filter() et reduce(). Il existe quelques différences essentielles entre forEach() et les autres fonctions. Toutes ces méthodes répètent dans un tableau de la même façon, en appliquant une fonction à chaque élément du tableau dans l’ordre. La différence apparaît lors de l’examen de la valeur de retour de ces méthodes. Les méthodes map(), filter() et reduce() sont conçues pour produire une valeur de retour, que cette valeur soit un objet unique ou un tableau.

En revanche, la méthode forEach() renvoie une valeur indéfinie. Cela peut avoir des effets négatifs dans certains cas, par exemple lorsqu’on essaie d’enchaîner plusieurs appels de méthode. Ainsi, la méthode forEach() est généralement utilisée pour exécuter en série une fonction par rapport à une liste d’entrées. Sa syntaxe est la suivante :

Array.forEach(callback(item, index, arr), cetteValeur)

• callback est la fonction à invoquer pour chaque élément, et prend les paramètres suivants :
  • item est l’élément courant. Pour améliorer la lisibilité, l’élément est généralement nommé d’après le type de l’objet stocké dans le tableau (par exemple, num pour les nombres, car pour les voitures, etc.)
  • index est l’index de l’élément actuel dans le tableau en cours de traitement
  • arr est le tableau qui est parcouru en boucle. Puisque forEach() renvoie une valeur indéfinie, cela peut être utile si des modifications du tableau d’origine sont nécessaires (l’exemple ci-dessous le montre en action)
• cetteValeur permet de modifier ce contexte

Ci-dessous un exemple de code qui utilise forEach() pour itérer dans une liste :

const words = ['hello', 'bird', 'table', 'football', 'pipe', 'code'];
const capWords = words.forEach(capitalize);
function capitalize(word, index, arr) {
arr[index] = word[0].toUpperCase() + word.substring(1);
}
console.log(words);
// Sortie attendue:
// ["Hello", "Bird", "Table", "Football", "Pipe", "Code"]

Remarque : comme chaque élément du tableau représente un mot, nous avons changé le nom du paramètre élément en “mot”.

La méthode forEach() de l’exemple ci-dessus invoque la fonction capitalize(). Cette fonction peut recevoir n’importe quel tableau de mots, et fonctionnera de manière similaire sur l’entrée. La méthode est appliquée à chaque élément du tableau à tour de rôle, en mettant en majuscules chaque mot avant de mettre à jour le contenu du tableau d’origine. Cela nous permet d’appliquer facilement un ensemble de modifications à un tableau entier. À noter également  que dans l’exemple ci-haut, la variable capWords est indéfinie à la fin de l’exécution.