open

Javascript : Les méthodes forEach et map

#1 Précaution avant d'envisager d'utiliser forEach et map ? open

Les méthodes forEach et map sont des méthodes de l'objet de constructeur Array(). Prenez la précaution de vous assurer que vous êtes en train de travailler sur un tel objet. En effet il y a beaucoup de tableaux qui sont de simple collection et qui ne sont pas dotés ces méthodes. C'est le cas par exemple lorsque vous travailler sur le DOM.

Si vous avez affaire à une collection et que vous ne savez pas la transformer en Array() alors voyez ce tutoriel "Comment transformer une collection en Array".

#2 Quand utiliser forEach et map ? open

En Javascript lorsque vous avez un tableau et que vous voulez appliquer un traitement à chaque élément du tableau vous devez utilisez forEach et/ou map. La boucle du parcours de chaque élément du tableau se fait à l'intérieur de ces méthodes et vous passez le traitement en argument de ces méthodes. On verra à la fin du tutoriel quand utiliser l'un plutôt que l'autre.

Javascript: Principe du forEach et du map

Dans les langages impératifs (* Pascal, C, Java) généralement vous faites le parcours d'un tableau à l'aide d'une boucle for et si vous avez un tableau tab vous traitez l'élément tab[i].

#3 Parcours d'un tableau avec forEach open

Ci-dessous je déclare le callback sous la forme d'une expression de fonction et avec une fonction qui est une fonction fléchée. Puis j'appelle forEach en lui passant la référence de ce callback en argument. La référence ici c'est carre.

Le callback doit prendre la valeur d'un élément du tableau en premier argument. Ensuite ce callback sera appelé par forEach à l'intérieur du forEach et forEach placera la valeur de chaque élément du tableau en premier argument du callback. C'est pour ça que ça marche c'est parce que c'est prévu de fonctionner comme ça entre forEach et son callback. Vous vous déclarez le callback mais ce n'est pas vous qui faite l'appel !! L'appel est fait par le forEach. Donc vous prévoyez au moment de la déclaration valeur en premier paramètre.

La petite difficulté c'est de comprendre ça car en fait vous ne voyez pas ce qui se passe à l'intérieur du forEach. Les premières fois les gens souvent bloquent à cet endroit là. De même j'attire votre attention : ne confondez pas les arguments que vous passez à forEach avec ceux que vous passez au callback.

  1. A forEach vous passez en argument le callback et éventuellement une valeur de this.
  2. Au callback vous passez la valeur d'un élément. C'est le cas dans cet exemple. Et on verra dans un autre exemple plus loin que vous pouvez passer en second argument l'indice de l'élément et éventuellement en troisième un pointeur sur le tableau sur lequel vous travaillez.
Tester le code

#4 Parcours d'un tableau avec index non contigu et modification du tableau open

Pour être complet il faut dire que :

  1. La méthode forEach renvoie undefined.
  2. Vous ne pouvez pas interrompre le forEach ce qui peut être un inconvénient par rapport à un for.
  3. La méthode forEach parcours la liste des propriétés de l'objet Array. Donc la liste des index qui existent. Ci-dessous on va faire un exemple avec des index qui n'existent pas et on va voir qu'avec forEach on n'est pas dérangé alors qu'avec un for il faudrait gérer.

Ci-dessous je déclare le callback directement en tant que paramètre de forEach. Je déclare trois paramètres valeur, index, table. Dans ces conditions il est possible de modifier le tableau depuis la méthode forEach. Il faut le faire en utilisant un troisième argument au niveau du callback. Il n'est pas possible de faire un return pour récupérer un tableau modifié. Si vous passez le nom d'un tableau soyez conscient que vous passez une variable de type object donc une référence sur un Array. Et si vous passez une référence vous pouvez modifier l'objet sur lequel pointe la référence. Si ce que je vous dis n'est pas parfaitement clair revoyez le point 9 du tutoriel sur les objets de la formation "Les bases du Javascript".

Dans l'exemple suivant il n'y a pas de valeur pour tab[0], tab[2] et tab[4] et forEach ne va pas essayer d'y accéder, ce que ferait une traditionnelle boucle for.

Tester le code
Javascript: Résultats du forEach

#5 Créer un nouveau tableau avec la méthode map open

Si vous voulez créer un nouveau tableau vous devez utiliser map. Cette méthode va appliquer la fonction callback sur chaque élément du tableau et directement retourner le tableau modifié. Ceci vous permet d'avoir un tableau en entrée et un autre en sortie.

Etant donné que vous avez un tableau en sortie vous pouvez chaîner un map avec une autre méthode forEach, reduce, sort, filter etc.

Ci-dessous on va utiliser un console.table pour visualiser le tableau de sortie

Tester le code
Javascript: Résultats du map

#6 Quand utiliser forEach plutôt que map ou map plutôt que forEach open

  1. S'il s'agit d'utiliser les valeurs d'un tableau pour aller les afficher avec un console.log() ce qui était notre cas ou alors aller les modifier dans l'arbre d'un document HTML ce qui est beaucoup plus courant alors utilisez forEach. Dans ce cas le tableau est utilisé uniquement en entrée.
  2. Si vous voulez modifier les valeurs contenues dans le tableau et les remplacer par les valeurs traitées alors utilisez forEach avec un callback à trois arguments.
  3. Enfin si vous voulez traiter un tableau et récupérer un nouveau tableau en sortie alors utilisez map.