🦸‍♀️ JavaScript : map, filter, reduce

Les super-pouvoirs des tableaux
(Cérémonie d’adieu à la boucle for – les yeux un peu humides 🎉)

Il était une fois, les développeurs JavaScript vivaient comme ça :

for (let i = 0; i < arr.length; i++) {
  // Ce que Dieu voudra…
}

Le code était long 📏
Difficile à lire 👀
Très propice aux erreurs 💣

Puis ES6 est arrivé…
Et JavaScript a dit :

« Hé mon ami, détends-toi…
Tu n’as pas besoin d’écrire une boucle for pour tout. »

Voici les Avengers des tableaux 🦸‍♂️🦸‍♀️
map, filter, reduce

🗺️ MAP

« TOUT LE MONDE RESTE, MAIS UN PEU TRANSFORMÉ »

🧠 Que fait map ?

• Prend un tableau
• Transforme chaque élément
• Retourne un nouveau tableau de la même longueur

map = Transformer, sans supprimer.

🔹 Exemple de base

const numbers = [1, 2, 3, 4];

const squares = numbers.map(n => n * n);

console.log(squares);
// [1, 4, 9, 16]

📌 Étape par étape :

• map parcourt le tableau
• Prend chaque nombre
• Calcule n * n
• Met le résultat dans un nouveau tableau

⚠️ Le tableau original numbers ?
👉 Intact (map est poli 😌)

😂 Analogie de la vraie vie

const prices = [100, 200, 300];

const withTax = prices.map(p => p * 1.2);

100 → 120
200 → 240
300 → 360

map : « Tout le monde prend 20 % d’augmentation. Justice sociale. » 💸😅

🧠 Quand utiliser map ?

• Préparer des données API pour l’UI
• Convertir des nombres en chaînes
• Ajouter de nouvelles propriétés aux objets

Exemple : mettre les noms d’utilisateurs en majuscules

const users = ["ali", "ayşe", "mehmet"];

const upperUsers = users.map(u => u.toUpperCase());

🧹 FILTER

« SUPPRIMER L’INUTILE, GARDER LA QUALITÉ »

🧠 Que fait filter ?

• Parcourt le tableau
• Garde les éléments qui respectent une condition
• Élimine les autres

filter = l’ami sélectif 😎

🔹 Exemple de base

const ages = [12, 18, 25, 14, 30];

const adults = ages.filter(age => age >= 18);

console.log(adults);
// [18, 25, 30]

📌 Que s’est-il passé ?

• La fonction s’exécute pour chaque âge
• true → reste dans la liste
• false → dehors 🚪

😂 Analogie de la vraie vie

const comments = [
  { spam: true },
  { spam: false },
  { spam: false }
];

const cleanComments = comments.filter(c => !c.spam);

filter : « Tolérance zéro pour le spam. » ❌📩

🧠 Quand utiliser filter ?

• Sélectionner les utilisateurs connectés
• Afficher les produits en stock
• Séparer actif / inactif

🧮 REDUCE

« ALLEZ, TRANSFORMONS TOUT ÇA EN UNE SEULE CHOSE »

🧠 Que fait reduce ?

• Prend un tableau
• Le réduit à une seule valeur

Cette valeur peut être :

• un nombre
• une chaîne
• un objet
• un tableau

reduce = peut tout être… un peu dangereux 😈

🔹 Exemple classique : la somme

const numbers = [1, 2, 3, 4];

const total = numbers.reduce((acc, n) => {
  return acc + n;
}, 0);

console.log(total);
// 10

📌 Logique de reduce :

• acc → accumulateur (la tirelire 🐷)
• n → élément courant
• 0 → valeur initiale

Étapes :

• 0 + 1 = 1
• 1 + 2 = 3
• 3 + 3 = 6
• 6 + 4 = 10

😵 Pourquoi reduce fait peur ?
Parce que ceci est aussi possible :

const result = arr.reduce((a, b) => {
  return a ? b : a;
});

👆 Celui qui écrit ça et celui qui le lit pleurent tous les deux.

Si tu utilises reduce, priorise la lisibilité.

🧠 Quand utiliser reduce ?

• Totaux de panier
• Résultats de votes
• Regroupements
• Calculs statistiques

🎮 MINI-PROJET : PANIER D’ACHATS

const cart = [
  { product: "Book", price: 100, quantity: 2 },
  { product: "Headphones", price: 300, quantity: 1 },
  { product: "Coffee", price: 50, quantity: 3 }
];

const total = cart.reduce((acc, item) => {
  return acc + item.price * item.quantity;
}, 0);

console.log(total);
// 650

🧠 Qu’avons-nous appris ?

• map → pouvait extraire les prix
• filter → pouvait sélectionner les articles en promo
• reduce → est passé à la caisse 💳

🔗 CHAÎNAGE (CHAINING)

« UN TABLEAU, TROIS SUPER-POUVOIRS »

const result = numbers
  .filter(x => x > 2)
  .map(x => x * 10)
  .reduce((a, b) => a + b, 0);

📌 Comment le lire :

• Prendre les nombres supérieurs à 2
• Les multiplier par 10
• Les additionner

JavaScript dit :
« Écris du code lisible, je m’occupe des performances. » 😎

⚠️ ERREURS LES PLUS COURANTES

❌ Utiliser map comme filter

arr.map(x => {
  if (x > 5) return x;
});

Résultat :

[undefined, undefined, 6]

✅ Correct

arr.filter(x => x > 5);

❌ Show-off avec reduce

arr.reduce((a, b) => a + b);

Pas de valeur initiale → surprise 🎁

✅ Reduce sûr

arr.reduce((a, b) => a + b, 0);

🧠 LEQUEL UTILISER, QUAND ? (TABLEAU D’OR)

🏁 CONCLUSION

La boucle for n’est pas morte… elle est juste à la retraite 👴

map, filter, reduce :

• Raccourcissent ton code ✂️
• Améliorent la lisibilité 📖
• Te font passer de junior à intermédiaire 🚀

Écrire du JavaScript moderne,
c’est utiliser le bon super-pouvoir pour le bon tableau 🦸‍♂️