Les différences entre forEach () et map () que tout développeur devrait connaître

JavaScript a des méthodes pratiques qui nous aident à parcourir nos tableaux. Les deux plus couramment utilisés pour l'itération sont Array.prototype.map()et Array.prototype.forEach().

Mais je pense qu'ils restent un peu flous, surtout pour un débutant. Parce qu'ils font tous les deux une itération et produisent quelque chose. Alors, quelle est la difference?

Dans cet article, nous examinerons les éléments suivants:

  • Définitions
  • La valeur de retour
  • Capacité d'enchaîner d'autres méthodes
  • Mutabilité
  • Vitesse de performance
  • Dernières pensées

Définitions

La mapméthode reçoit une fonction en tant que paramètre. Ensuite, il l'applique sur chaque élément et renvoie un tout nouveau tableau rempli des résultats de l'appel de la fonction fournie.

Cela signifie qu'il renvoie un nouveau tableau contenant une image de chaque élément du tableau. Il renverra toujours le même nombre d'articles.

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) // >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]

Comme map, la forEach()méthode reçoit une fonction en tant qu'argument et l'exécute une fois pour chaque élément du tableau. Cependant, au lieu de renvoyer un nouveau tableau comme map, il retourne undefined.

const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass

1. La valeur de retour

La première différence entre map()et forEach()est la valeur renvoyée. La forEach()méthode retourne undefinedet map()retourne un nouveau tableau avec les éléments transformés. Même s'ils font le même travail, la valeur renvoyée reste différente.

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 

2. Capacité d'enchaîner d'autres méthodes

La deuxième différence entre ces méthodes de tableau est le fait qu'il map()est chaînable. Cela signifie que vous pouvez joindre reduce(), sort(), filter()et ainsi de suite après avoir effectué une map()méthode sur un tableau.

C'est quelque chose que vous ne pouvez pas faire forEach()car, comme vous pouvez le deviner, il revient undefined.

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined myAwesomeArray.map(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>>return value: 55 

3. Mutabilité

En général, le mot «muter» signifie changer, alterner, modifier ou transformer. Et dans le monde JavaScript, cela a la même signification.

Un objet mutable est un objet dont l'état peut être modifié après sa création. Alors, qu'en est-il forEachet en mapce qui concerne la mutabilité?

Eh bien, selon la documentation MDN:

forEach()ne modifie pas le tableau sur lequel il est appelé. (Cependant, callbackpeut le faire).

map()ne modifie pas le tableau sur lequel il est appelé (bien que callback, s'il est appelé , il peut le faire).

JavaScript est bizarre .

Gif

Ici, nous voyons une définition très similaire, et nous savons tous qu'ils reçoivent tous les deux un callbackcomme argument. Alors, lequel repose sur l'immuabilité?

Eh bien, à mon avis, cette définition n'est pas claire cependant. Et pour savoir lequel ne mute pas le tableau d'origine, nous devons d'abord vérifier le fonctionnement de ces deux méthodes.

La map()méthode renvoie un tableau entièrement nouveau avec des éléments transformés et la même quantité de données. Dans le cas de forEach(), même s'il retourne undefined, il mute le tableau d'origine avec l'extension callback.

Par conséquent, nous voyons clairement que map()repose sur l'immuabilité et forEach()est une méthode mutante.

4. Vitesse de performance

En ce qui concerne la vitesse de performance, ils sont un peu différents. Mais, est-ce important? Eh bien, cela dépend de diverses choses comme votre ordinateur, la quantité de données que vous traitez, etc.

Vous pouvez le vérifier vous-même avec cet exemple ci-dessous ou avec jsPerf pour voir lequel est le plus rapide.

const myAwesomeArray = [1, 2, 3, 4, 5] const startForEach = performance.now() myAwesomeArray.forEach(x => (x + x) * 10000000000) const endForEach = performance.now() console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`) const startMap = performance.now() myAwesomeArray.map(x => (x + x) * 10000000000) const endMap = performance.now() console.log(`Speed [map]: ${endMap - startMap} miliseconds`) 

Dernières pensées

Comme toujours, le choix entre map()et forEach()dépendra de votre cas d'utilisation. Si vous prévoyez de modifier, d'alterner ou d'utiliser les données, vous devez choisir map(), car il renvoie un nouveau tableau avec les données transformées.

Mais, si vous n'avez pas besoin du tableau retourné, n'utilisez pas map()- utilisez plutôt forEach()ou même une forboucle.

Espérons que cet article clarifie les différences entre ces deux méthodes. S'il y a plus de différences, veuillez les partager dans la section commentaires, sinon merci de l'avoir lu.

Lire la suite de mes articles sur mon blog

Photo de Franck V. sur Unsplash