Méthodes de tableaux : map, filter, reduce, find

Apprenez à transformer, filtrer et agréger des données avec les quatre méthodes de tableaux les plus utilisées en projet réel.

10 min · 3 questions

Dans un projet réel, vous passez votre temps à transformer des données : une liste de produits à afficher, des résultats d'API à trier, un panier à totaliser. Les méthodes map, filter, reduce et find remplacent la plupart de vos boucles for par un code plus court et plus expressif. Elles ne modifient jamais le tableau d'origine : elles retournent un nouveau résultat, ce qui évite bien des bugs.

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

filter garde uniquement les éléments qui passent un test et retourne un nouveau tableau, éventuellement vide. find s'arrête au premier élément qui correspond et retourne l'élément lui-même, ou undefined si rien ne correspond. Exercice mental : pour récupérer tous les produits en stock, lequel choisissez-vous ? Et pour récupérer le produit nommé « mouse » ?

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce est la plus puissante : elle réduit un tableau à une seule valeur (un nombre, un objet, une chaîne). Elle reçoit une fonction avec un accumulateur et l'élément courant, plus une valeur initiale. Cas d'usage classique : calculer le total d'un panier.

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Casquette", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

Pour choisir la bonne méthode, posez-vous une seule question : quelle forme doit avoir le résultat ? Autant d'éléments que l'original mais transformés : map. Un sous-ensemble : filter. Un seul élément : find. Une valeur unique calculée : reduce. Ce réflexe vous fera gagner un temps précieux en entretien comme en projet.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quelle méthode retourne toujours un tableau de la même longueur que le tableau d'origine ?
   • filter
   • map
   • reduce
   • find
2. Que retourne find si aucun élément ne satisfait la condition ?
   • null
   • undefined
   • Un tableau vide
   • Une erreur est levée
3. Dans cart.reduce((sum, item) => sum + item.unitPrice, 0), à quoi sert le 0 final ?
   • C'est la valeur initiale de l'accumulateur sum
   • C'est l'index de départ du parcours
   • C'est la valeur retournée en cas de tableau invalide