JavaScript a quelques méthodes pratiques, qui nous aident à itérer nos tableaux. Les deux plus utilisés pour l'itération sont Array.prototype.map() et Array.prototype.forEach(), cependant, ils restent un peu flous, surtout pour un débutant. Parce qu'ils font tous les deux une itération et produisent en retour quelque chose. Alors, quelle est réellement la difference?

• Définition
• 1. La valeur de retour
• 2. Capacité à enchaîner d'autres méthodes
• 3. Mutabilité
• 4. Vitesse de performance
• Réflexions finales

Définition

La méthode map() crée un nouveau tableau rempli avec les résultats de l'appel d'une fonction appliquée sur chaque élément du tableau appelant.

La méthode forEach() exécute une fonction passée en paramètre sur chaque élément du tableau.

1. La valeur de retour

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

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach (x => x \* x)
// >>>>>>>>>>>>>> valeur de retour: undefined

myAwesomeArray.map (x => x \* x)
// >>>>>>>>>>>>>> valeur de retour: [1, 4, 9, 16, 25]

2. Capacité à chaîner d'autres méthodes

La deuxième différence entre ces méthodes de tableau est le fait que map() est chaînable, c'est-à-dire que vous pouvez attacher reduce(), sort(), filter() etc. après avoir exécuté une méthode map() à un tableau. C'est quelque chose que vous ne pouvez pas faire avec forEach() car comme vous pouvez le deviner, il retourne undefined.

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

3. Mutabilité

Selon la documentation de MDN:

forEach() ne mute pas le tableau sur lequel il est appelé. (Cependant, le callback passé en paramètre peut le faire).

map() ne mute pas le tableau sur lequel il est appelé (bien que le callback passé en paramètre, s'il est appelé, peut le faire)

JavaScript est bizarre.

Ici, nous voyons une définition très similaire, et, nous savons tous qu'ils reçoivent tous les deux un callback comme argument, alors, lequel s'appuie sur l'immuabilité?

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

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

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

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 plusieurs choses comme l'ordinateur, la quantité de données, etc. Vous pouvez le vérifier par vous-même avec cet exemple ci-dessous ou avec jsPerf pour voir laquelle de ces deux méthodes est 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(`Vitesse ​​[forEach]: ${endForEach - startForEach} millisecondes`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Vitesse [map]: ${endMap - startMap} millisecondes`)

Dernières pensées

Comme toujours, le choix entre map() etforEach() dépendra du cas d'utilisation. Si vous prévoyez de modifier, d'alterner ou d'utiliser les données, il est préférable de 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 boucle for.

J'espère que ce article a mis en évidence les différences entre ces deux méthodes. S'il y a plus de différences, veuillez les partager dans la section des commentaires, sinon merci d'avoir lu cet article.

Photo de Franck V. sur Unsplash