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

Javascript est un langage fonctionnel. En Javascript lorsque vous avez un tableau et que vous voulez appliquer un traitement à chaque élément du tableau vous pouvez utiliser entre autres la méthode forEach et/ou la méthode map. Je dis entre autres car il y a d'autres méthodes que l'on verra dans d'autres tutoriels. On verra en cours de tuto les avantages que cela peut vous apporter.

Il faut comprendre un certain nombre de choses :

  1. La boucle du parcours de chaque élément du tableau se fait à l'intérieur de la méthode concernée.
  2. Vous passez le traitement en argument de la méthode sous la forme d'une fonction qu'on appelle un callback.
  3. Ce callback est invoqué à l'intérieur de la méthode. Vous ne le voyez pas.
  4. Un ou plusieurs arguments sont passés à ce callback au moment de l'invocation.
  5. Vous devez consulter la documentation de la méthode concernée si vous ne connaissez pas la liste, l'ordre et la signification de chacun de ces arguments. Dans ce tutoriel c'est moi qui vais vous la donner dans chacun des exemples que je vais faire.
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 argument le tableau sur lequel vous faites le forEach.
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.

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. C'est 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.