Transformer, filtrer et chercher avec élégance
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre ce qu'est un callback
Une fonction passée en argument
2. Utiliser .map() pour transformer
Chaque élément en un nouveau
3. Utiliser .filter() pour sélectionner
Garder seulement certains éléments
4. Utiliser .find() et .includes()
Chercher dans un tableau
Rappel rapide : fonctions fléchées
La base des callbacks
Le concept de callback
Passer une fonction en argument
.map() : transformer chaque élément
Créer un nouveau tableau transformé
.filter() : garder seulement certains
Les éléments qui passent un test
.find() et .includes() : chercher
Trouver un élément dans un tableau
Chaîner les méthodes
Le pipeline de données
Syntaxe concise pour écrire des fonctions
// Sans paramètres
const saluer = () => "Bonjour!";
// Un paramètre (parenthèses optionnelles)
const double = n => n * 2;
// Plusieurs paramètres
const add = (a, b) => a + b;
Retour implicite : Pas besoin de {} ni return pour une seule expression
shorter
Syntaxe concise
Moins de code à écrire
callback
Idéales pour callbacks
Parfaites pour .map, .filter...
read
Plus lisible
Intention claire
// Comparaison
function(n) { return n * 2; }
n => n * 2
// 3x plus court!
// Convertir en fonction fléchée:
function triple(n) {
return n * 3;
}
Solution:
const triple = n => n * 3;
Une fonction passée en argument
"Je t'appelle quand j'ai fini"
Une fonction qui sera exécutée plus tard
Vous commandez un café au barista
1
Vous donnez votre nom
(le callback)
2
Le barista prépare
(le traitement)
3
On vous appelle!
(exécution du callback)
Le callback = "Voici mon nom, appelez-moi quand c'est prêt"
Pas besoin d'attendre sur place!
function saluer(nom, callback) {
console.log("Bonjour " + nom);
callback(); // Appel du callback
}
saluer("Alice", () => {
console.log("Bienvenue!");
});
// Résultat:
Bonjour Alice
Bienvenue!
Événements
button.addEventListener('click', () => {
...
});
setTimeout
setTimeout(() => {
console.log("3s plus tard");
}, 3000);
Méthodes de tableau
nombres.map(n => n * 2);
nombres.filter(n => n > 5);
fetch / Promesses
fetch(url).then(data => {
...
});
Transformer chaque élément
Applique une fonction à chaque élément
Retourne un NOUVEAU tableau
Important : Ne modifie PAS le tableau original!
tableau.map(callback)
const nombres = [1, 2, 3];
const doubles = nombres.map(n => n * 2);
// doubles = [2, 4, 6]
// nombres reste [1, 2, 3] (inchangé!)
Original
[1, 2, 3]
Après .map(n => n * 2)
[2, 4, 6]
// Doubler chaque nombre
[1, 2, 3].map(n => n * 2); // [2, 4, 6]
// Mettre en majuscules
["a", "b", "c"].map(s => s.toUpperCase()); // ["A", "B", "C"]
// Extraire une propriété d'objets
const users = [{nom: "Alice"}, {nom: "Bob"}];
const noms = users.map(u => u.nom);
// noms = ["Alice", "Bob"]
L'erreur la plus courante!
Mauvais
.map(n => { n * 2 })
// [undefined, undefined, ...]
Pas de return = undefined!
Bon
.map(n => n * 2)
// [2, 4, 6]
Return implicite!
Avec {} : il faut un return explicite
Garder seulement certains éléments
Garde les éléments où le callback retourne true
Retourne un NOUVEAU tableau
Important : Ne modifie PAS le tableau original!
tableau.filter(callback)
Le callback retourne true ou false
const nombres = [1, 2, 3, 4, 5];
const pairs = nombres.filter(n => n % 2 === 0);
// pairs = [2, 4]
// nombres reste [1, 2, 3, 4, 5] (inchangé!)
Original
[1, 2, 3, 4, 5]
Après .filter(n => n % 2 === 0)
[2, 4]
// Nombres pairs
[1, 2, 3, 4].filter(n => n % 2 === 0); // [2, 4]
// Chaînes non vides
["a", "", "b"].filter(s => s.length > 0); // ["a", "b"]
// Produits en stock
const produits = [
{nom: "Stylo", stock: 10},
{nom: "Cahier", stock: 0}
];
const disponibles = produits.filter(p => p.stock > 0);
// [{nom: "Stylo", stock: 10}]
.map()
TRANSFORME
Même nombre d'éléments
Chaque élément est modifié
[1,2,3].map(n => n*2)
// [2, 4, 6]
.filter()
SÉLECTIONNE
Peut être moins d'éléments
Garde ou supprime
[1,2,3,4].filter(n => n%2===0)
// [2, 4]
map = transformation | filter = sélection
Trouver UN élément
Retourne le PREMIER élément qui passe le test
Retourne undefined si rien trouvé
UN seul résultat, pas un tableau!
tableau.find(callback)
const users = [
{id: 1, nom: "Alice"},
{id: 2, nom: "Bob"},
{id: 3, nom: "Charlie"}
];
const user = users.find(u => u.id === 2);
// user = {id: 2, nom: "Bob"}
Si pas trouvé:
users.find(u => u.id === 999); // undefined
Retourne true ou false
const fruits = ["pomme", "banane", "orange"];
fruits.includes("banane"); // true
fruits.includes("kiwi"); // false
Attention : .includes() ne prend PAS de callback!
fruits.includes(fruit => fruit === "banane"); // MAUVAIS!
fruits.includes("banane"); // BON!
| Méthode | Retourne | Callback? | Utilisation |
|---|---|---|---|
| .find() | 1 élément ou undefined | Oui | Trouver UN élément spécifique |
| .filter() | Tableau (tous) | Oui | Trouver TOUS les éléments |
| .includes() | true / false | Non | Vérifier si une valeur existe |
find = un seul | filter = tous | includes = présence
Enchaîner les opérations
Chaque méthode travaille sur le résultat de la précédente
Pipeline de données
const produits = [
{nom: "Stylo", prix: 2, stock: 10},
{nom: "Cahier", prix: 5, stock: 0},
{nom: "Gomme", prix: 1, stock: 20}
];
const result = produits
.filter(p => p.stock > 0)
.map(p => p.nom.toUpperCase());
// result = ["STYLO", "GOMME"]
Étape 1: .filter()
Garder les produits en stock
[{nom: "Stylo"...}, {nom: "Gomme"...}]
Étape 2: .map()
Extraire les noms en majuscules
["STYLO", "GOMME"]
Une opération par ligne
Plus lisible, plus facile à déboguer
.filter() d'abord
Réduire les données avant de transformer = meilleure performance
Ordre important
filter().map() !== map().filter() en général
.map()
Transforme chaque élément
Nouveau tableau, même longueur
.filter()
Sélectionne les éléments
Nouveau tableau, peut être plus court
.find()
Trouve UN élément
1 élément ou undefined
.includes()
Vérifie présence
true/false, pas de callback
Tous retournent un NOUVEAU tableau/élément
Le tableau original n'est JAMAIS modifié
Pratiquez ces méthodes dans votre code!
La meilleure façon d'apprendre : expérimenter!
Ouvrez la console et testez .map(), .filter(), .find()