Méthodes de tableau JS : map, filter, reduce & co

Les tableaux embarquent une vraie boîte à outils

En JavaScript, les tableaux viennent avec tout un arsenal de méthodes intégrées. La plupart des boucles for que vous seriez tenté d'écrire — pour transformer des valeurs, en sélectionner certaines, ou faire une somme — se remplacent par une méthode qui tient sur une ligne, se lit mieux, et se combine proprement avec les autres.

Le trio de base, ce sont les méthodes map, filter et reduce. Une fois que vous maîtrisez ces trois-là et quelques-unes de leurs cousines, votre code bourré de boucles se réduit à quelque chose que vous saisissez d'un coup d'œil.

Chaque méthode prend une fonction de rappel (callback) et renvoie quelque chose. Aucune n'a modifié nums — un détail à bien garder en tête dès le départ.

map : transformer chaque élément

La méthode map prend une fonction et l'applique à chaque élément, puis rassemble les valeurs retournées dans un nouveau tableau de même longueur. À utiliser quand tu veux « une sortie par entrée ».

Le callback reçoit aussi l'index comme deuxième argument si tu en as besoin : arr.map((item, i) => ...). Sinon, ignore-le, tout simplement.

Une erreur classique : sortir map alors que tu n'as pas besoin du tableau retourné. Si tu veux juste afficher chaque élément ou insérer en base, un forEach ou une boucle classique fera très bien l'affaire.

filter : ne garder que ce qui matche

filter applique un prédicat — une fonction qui renvoie true ou false — à chaque élément et conserve ceux dont le résultat est truthy. Le nouveau tableau a la même taille, ou est plus court.

map et filter se chaînent naturellement. Lis la chaîne de gauche à droite comme un pipeline :

Filtrez d'abord, puis utilisez map — comme ça, map ne s'exécute que sur les éléments qui ont survécu au filtre.

reduce : réduire un tableau à une seule valeur

reduce est la plus polyvalente des trois. Tu lui passes une fonction réductrice du type (accumulateur, élément) => nouvelAccumulateur ainsi qu'une valeur de départ. La méthode parcourt le tableau, transmet chaque élément au réducteur avec l'accumulateur courant, et renvoie à la fin la valeur finale de cet accumulateur.

Le résultat n'est pas forcément un nombre. Ça peut très bien être un objet, un autre tableau, une chaîne de caractères — bref, tout ce que tu veux construire au fil du parcours :

Passe toujours la valeur initiale (le deuxième argument). Sans ça, reduce prend le premier élément comme accumulateur de départ, ce qui plante sur un tableau vide et, la plupart du temps, ne fait pas ce que tu voulais.

reduce est puissant, mais il devient vite illisible quand la logique se complique. Si ton reducer fait plus de quelques lignes, une bonne vieille boucle for...of sera souvent bien plus claire.

forEach : effets de bord, sans valeur de retour

forEach, c'est un peu comme map mais sans le tableau renvoyé. On l'utilise quand on veut faire quelque chose avec chaque élément — l'afficher dans la console, appeler une API, mettre à jour le DOM — sans avoir besoin d'une nouvelle collection en sortie.

Deux points à garder en tête :

• forEach renvoie undefined. Impossible d'enchaîner un .map() derrière.
• On ne peut pas sortir d'un forEach avec break. Si tu as besoin d'une sortie anticipée, passe par for...of, some ou every.

Si tu te retrouves à écrire arr.forEach(x => results.push(transform(x))), c'est qu'il te faut un map.

find et findIndex : un seul élément, merci

find renvoie le premier élément qui satisfait le prédicat, ou undefined si rien ne correspond. findIndex, lui, renvoie l'indice (ou -1).

find s'arrête dès la première correspondance. Évitez filter(...)[0] : ça parcourt tout le tableau pour ensuite jeter le reste.

some et every : poser des questions booléennes

some renvoie true si au moins un élément passe le test. every ne renvoie true que si tous le passent.

Les deux s'arrêtent dès qu'elles le peuvent : some sort à la première valeur true, every sort au premier false. C'est exactement ce qu'il faut pour répondre aux questions du type « est-ce qu'au moins un… » ou « est-ce que tous les… ».

slice vs splice : copier ou découper

Les noms se ressemblent, mais le comportement est radicalement différent.

slice(start, end) renvoie une copie superficielle d'une portion du tableau, sans rien modifier. La borne end est exclue ; si on ne la précise pas, on va jusqu'à la fin du tableau.

splice(start, deleteCount, ...items) modifie le tableau en place : elle supprime deleteCount éléments à partir de start, insère éventuellement de nouveaux éléments à leur place, et renvoie les éléments retirés.

Moyen mnémotechnique : slice, c'est safe (ça copie), splice opère au bistouri directement sur le tableau.

Méthodes mutables vs non mutables

La distinction a son importance. Un code qui modifie par accident un tableau partagé, c'est typiquement le genre de bug pénible à traquer.

Mutables (modifient l'original, renvoient généralement autre chose) :

• push, pop, shift, unshift
• splice, sort, reverse
• fill, copyWithin

Non mutables (renvoient un nouveau tableau ou une valeur, l'original reste intact) :

• map, filter, slice, concat
• flat, flatMap
• find, findIndex, some, every, includes, indexOf
• reduce, reduceRight

Les deux à surveiller de près, ce sont sort et reverse — elles ont l'air inoffensives mais mutent en douce. Si tu veux une copie triée, commence par un slice :

Le JS moderne propose aussi des jumelles non mutantes : toSorted, toReversed, toSpliced et with. Elles renvoient un nouveau tableau sans toucher à l'original. Dispo dans tous les runtimes récents — à privilégier dès que tu peux.

flat et flatMap

flat aplatit les tableaux imbriqués sur un niveau (ou plus, si on lui passe une profondeur en argument). flatMap, lui, combine un map suivi d'un flat d'un seul niveau — bien pratique quand chaque élément peut produire zéro, un ou plusieurs résultats.

flatMap est la façon élégante de « développer » des éléments — une entrée, plusieurs sorties — sans avoir à rajouter un flat() derrière.

Un exemple concret

Prenons un cas réaliste. À partir d'une liste de commandes, on veut calculer le chiffre d'affaires total des commandes terminées dépassant 50 $ :

Trois méthodes, un seul pipeline, aucune gestion manuelle de boucle. Chaque étape dit ce qu'elle fait. On pourrait fusionner les deux filter en un seul, mais les garder séparés reste tout à fait lisible — et ça dépanne bien quand on doit déboguer.

Et ensuite : Map et Set

Les tableaux sont parfaits pour gérer des séquences ordonnées, mais ils deviennent pénibles dès qu'il faut faire des recherches rapides par clé ou stocker une collection de valeurs uniques. JavaScript fournit deux structures de données natives taillées exactement pour ça — Map et Set — et c'est justement le sujet de la page suivante.