map() vs forEach()
map() construit un nouveau tableau à partir des résultats de la fonction ; forEach() se contente d’appeler la fonction pour chaque élément et renvoie toujours undefined.
Comparaison point par point
#Ce qu’elle renvoie
- Array.prototype.map()
- Un nouveau tableau avec les résultats de la fonction
- Array.prototype.forEach()
undefined
Longueur du résultat
- Array.prototype.map()
- Toujours la même que le tableau d’entrée
- Array.prototype.forEach()
- Aucun résultat
Modifie le tableau d’origine
- Array.prototype.map()
- Non, sauf si la fonction elle-même le fait
- Array.prototype.forEach()
- Non, sauf si la fonction elle-même le fait
Chaînage de méthodes
- Array.prototype.map()
- Oui, par ex.
.map().filter().join() - Array.prototype.forEach()
- Non, car elle renvoie
undefined
Interruption en cours de route
- Array.prototype.map()
- Impossible
- Array.prototype.forEach()
- Impossible,
breakne fonctionne pas (utilisezfor...of)
Usage typique
- Array.prototype.map()
- Transformation de données, rendu de listes en React
- Array.prototype.forEach()
- Journalisation, enregistrement, modifications de la page
Exemple
#const prices = [10, 20, 30]
const doubled = prices.map((price) => price * 2)
const result = prices.forEach((price) => console.log(price))
console.log(doubled)
console.log(result)Définition et utilisation
#Les deux méthodes parcourent les éléments du tableau et appellent pour chacun la même fonction avec les arguments (element, index, array). Ce qui les distingue, c’est ce qui arrive au résultat : map() rassemble les valeurs renvoyées par la fonction dans un nouveau tableau de même longueur, tandis que forEach() les ignore et renvoie toujours undefined.
Le choix est donc simple. Quand vous voulez transformer des données et utiliser ensuite le résultat (prix avec taxe, liste de noms, éléments d’une liste en React), utilisez map(). Quand vous voulez seulement exécuter un effet de bord pour chaque élément (l’afficher dans la console, l’enregistrer, modifier un élément de la page), utilisez forEach().
La performance n’est pas un critère ici, car en pratique les deux méthodes sont tout aussi rapides. Ce qui compte, c’est la lisibilité : un map() dont personne n’utilise le résultat laisse penser à une erreur, et un forEach() avec push() dans un tableau séparé n’est qu’une version plus longue de map().
Syntaxe
#const result = array.map((element, index, array) => newValue)
array.forEach((element, index, array) => { /* effet de bord */ })Plus d’exemples
#const students = [
{ name: 'Léa', points: 120 },
{ name: 'Lucas', points: 95 },
{ name: 'Emma', points: 140 }
]
const summary = students
.map((student) => `${student.name}: ${student.points}`)
.join(', ')
console.log(summary)const names = ['léa', 'lucas']
const upperWithForEach = []
names.forEach((name) => upperWithForEach.push(name.toUpperCase()))
const upperWithMap = names.map((name) => name.toUpperCase())
console.log(upperWithForEach)
console.log(upperWithMap)Le résultat est le même, mais la version avec map() est plus courte et ne nécessite pas de tableau vide au départ.
const scores = [40, 75, 90, 20]
for (const score of scores) {
if (score > 80) {
console.log('Premier résultat au-dessus de 80 :', score)
break
}
}Bonnes pratiques
#- Si vous n’utilisez pas le tableau renvoyé par
map(), remplacez-le parforEach()ou une bouclefor...of. - N’utilisez pas
forEach()avecawait: la boucle n’attend pas les promesses. Utilisezfor...ofouawait Promise.all(array.map(...)). - Vous cherchez un seul élément ou vérifiez une condition ?
find(),some()etevery()terminent plus tôt queforEach().
Entrées associées
#- Array.prototype.map()Crée un nouveau tableau avec les résultats de l’appel d’une fonction pour chaque élément.
- Array.prototype.forEach()Appelle une fonction pour chaque élément du tableau.
- for...ofParcourt les valeurs successives d’un objet itérable : tableau, chaîne, Map, Set et autres.
- Array.prototype.filter()Crée un nouveau tableau avec les éléments pour lesquels la fonction a renvoyé true.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.