Chargement de ta page…
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.
Publié par Projet Carthage · Mis à jour le
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
Essayer cet exempleconst 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.
