Maîtriser map(), filter() et reduce() en JavaScript (Exemples Clairs)
Découvrez comment manipuler vos données de manière immuable et déclarative sans boucles for complexes.
Explications & Fondations Techniques
`map()` transforme chaque élément d'un tableau et renvoie un nouveau tableau de même taille sans modifier l'original.
`filter()` sélectionne les éléments satisfaisant une condition booléenne (prédicat) et renvoie un sous-ensemble filtré.
`reduce()` accumule tous les éléments d'un tableau en une valeur unique (somme, objet de regroupement, compte).
Exemple de Code Pratique
Exécuter dans le Playgroundconst produits = [
{ nom: "Clavier Mécanique", prix: 120, categorie: "Tech" },
{ nom: "Souris Ergonomique", prix: 80, categorie: "Tech" },
{ nom: "Cahier de Notes", prix: 15, categorie: "Papeterie" },
];
// 1. Filtrer les produits Tech
const tech = produits.filter((p) => p.categorie === "Tech");
// 2. Extraire les prix avec remise de 10%
const prixReduits = tech.map((p) => p.prix * 0.9);
// 3. Calculer le total du panier avec reduce
const totalPanier = tech.reduce((accumulateur, p) => accumulateur + p.prix, 0);
console.log("Total Tech :", totalPanier, "€"); // 200 €Pièges Fréquents & Mauvaises Pratiques
✗ Oublier la valeur initiale dans reduce()
const total = [{prix: 10}].reduce((acc, item) => acc + item.prix); // Erreur objet concaténéconst total = [{prix: 10}].reduce((acc, item) => acc + item.prix, 0);Si vous ne fournissez pas de valeur initiale (ex: 0), reduce prend le premier élément (l'objet complet) comme accumulateur.
Questions Fréquentes
Est-ce que map() modifie le tableau d'origine ?▾
Non, `map()` est une fonction pure qui renvoie toujours un nouveau tableau. Le tableau initial reste inchangé.
Maîtrisez JavaScript pas à pas
Résolvez des défis interactifs directement dans votre navigateur avec retour immédiat et indices progressifs.