Map, Filter, Reduce et Événements Focus/Blur (Explications Détaillées)

---

1️⃣ La Méthode MAP - Transformer les données

Qu’est-ce que map ?

map crée un nouveau tableau en transformant chaque élément du tableau original. C’est comme appliquer une formule à chaque élément.

Syntaxe simple

const nouveauTableau = tableau.map((element) => {
    // Transformer l'élément
    return element * 2;
});

🔍 Comprendre les paramètres

const nombres = [1, 2, 3, 4, 5];

// Paramètre 1 : element (l'élément courant)
const doubles = nombres.map((element) => element * 2);
console.log(doubles); // [2, 4, 6, 8, 10]

// Paramètre 2 : index (la position)
const avecIndex = nombres.map((element, index) => {
    return `Position ${index}: ${element}`;
});
console.log(avecIndex);
// ["Position 0: 1", "Position 1: 2", "Position 2: 3", ...]

// Paramètre 3 : tableau (le tableau original)
const avecTableau = nombres.map((element, index, tableau) => {
    return element + tableau.length; // Ajouter la longueur du tableau
});
console.log(avecTableau); // [6, 7, 8, 9, 10]

💡 Exemples pratiques

Exemple 1 : Doubler les nombres

const nombres = [1, 2, 3, 4, 5];
const doubles = nombres.map((nombre) => nombre * 2);
console.log(doubles); // [2, 4, 6, 8, 10]

Exemple 2 : Convertir des chaînes en nombres

const textes = ['10', '20', '30'];
const nombres = textes.map((texte) => parseInt(texte));
console.log(nombres); // [10, 20, 30]

Exemple 3 : Ajouter un index à une liste de fruits

const fruits = ['pomme', 'banane', 'cerise'];
const fruitsNumerotes = fruits.map((fruit, index) => {
    return `${index + 1}. ${fruit}`;
});
console.log(fruitsNumerotes);
// ["1. pomme", "2. banane", "3. cerise"]

Exemple 4 : Transformer des objets

const utilisateurs = [
    { nom: 'Eva', age: 25 },
    { nom: 'Owen', age: 30 },
    { nom: 'Diane', age: 28 },
];

// Extraire seulement les noms
const noms = utilisateurs.map((user) => user.nom);
console.log(noms); // ["Eva", "Owen", "Diane"]

// Créer une présentation
const presentations = utilisateurs.map((user) => `${user.nom} a ${user.age} ans`);
console.log(presentations);
// ["Eva a 25 ans", "Owen a 30 ans", "Diane a 28 ans"]

Exemple 5 : Élever au carré

const nombres = [1, 2, 3, 4, 5];
const carres = nombres.map((n) => n * n);
console.log(carres); // [1, 4, 9, 16, 25]

⚠️ Points importants sur map

Point	Explication
Immutabilité	Le tableau original ne change pas
Longueur	Le nouveau tableau a la même longueur
Retour obligatoire	Chaque fonction doit retourner une valeur
Ordre	Les éléments gardent le même ordre

const original = [1, 2, 3];
const transforme = original.map((n) => n * 2);

console.log(original); // [1, 2, 3] (inchangé)
console.log(transforme); // [2, 4, 6] (nouveau tableau)

---

2️⃣ La Méthode FILTER - Sélectionner les données

Qu’est-ce que filter ?

filter crée un nouveau tableau contenant seulement les éléments qui passent un test (retournent true).

📝 Syntaxe simple

const nouveauTableau = tableau.filter((element) => {
    return condition; // true ou false
});

🔍 Comprendre le fonctionnement

const nombres = [1, 2, 3, 4, 5, 6];

// Garder seulement les nombres pairs
const pairs = nombres.filter((nombre) => nombre % 2 === 0);
console.log(pairs); // [2, 4, 6]

// Garder seulement les nombres > 3
const grands = nombres.filter((nombre) => nombre > 3);
console.log(grands); // [4, 5, 6]

💡 Exemples pratiques

Exemple 1 : Filtrer les nombres pairs

const nombres = [1, 2, 3, 4, 5, 6, 7, 8];
const pairs = nombres.filter((n) => n % 2 === 0);
console.log(pairs); // [2, 4, 6, 8]

Exemple 2 : Filtrer les nombres supérieurs à une valeur

const nombres = [10, 5, 20, 3, 15];
const superieurA10 = nombres.filter((n) => n > 10);
console.log(superieurA10); // [20, 15]

Exemple 3 : Filtrer les utilisateurs par âge

const utilisateurs = [
    { nom: 'Eva', age: 25 },
    { nom: 'Owen', age: 30 },
    { nom: 'Diane', age: 28 },
    { nom: 'Alice', age: 22 },
];

// Garder seulement les utilisateurs majeurs (>= 25)
const majeurs = utilisateurs.filter((user) => user.age >= 25);
console.log(majeurs);
// [{ nom: 'Eva', age: 25 }, { nom: 'Owen', age: 30 }, { nom: 'Diane', age: 28 }]

Exemple 4 : Filtrer les chaînes non vides

const textes = ['hello', '', 'world', '', 'javascript'];
const nonVides = textes.filter((texte) => texte.length > 0);
console.log(nonVides); // ["hello", "world", "javascript"]

Exemple 5 : Filtrer les produits par prix

const produits = [
    { nom: 'iPhone', prix: 999 },
    { nom: 'Livre', prix: 15 },
    { nom: 'MacBook', prix: 1499 },
    { nom: 'Stylo', prix: 2 },
];

// Produits moins chers que 100€
const abordables = produits.filter((p) => p.prix < 100);
console.log(abordables);
// [{ nom: 'Livre', prix: 15 }, { nom: 'Stylo', prix: 2 }]

⚠️ Points importants sur filter

Point	Explication
Immutabilité	Le tableau original ne change pas
Longueur variable	Le nouveau tableau peut être plus court
Retour booléen	La fonction doit retourner true ou false
Éléments conservés	Seuls les éléments true sont gardés

const original = [1, 2, 3, 4, 5];
const filtre = original.filter((n) => n > 2);

console.log(original); // [1, 2, 3, 4, 5] (inchangé)
console.log(filtre); // [3, 4, 5] (plus court)

---

3️⃣ La Méthode REDUCE - Agréger les données

Qu’est-ce que reduce ?

reduce transforme un tableau en une seule valeur en accumulant les résultats. C’est comme faire un calcul global sur tous les éléments.

📝 Syntaxe

const resultat = tableau.reduce((accumulateur, element) => {
    return accumulateur + element;
}, valeurInitiale);

🔍 Comprendre l’accumulateur

L’accumulateur est une variable qui accumule les résultats à chaque itération.

const nombres = [1, 2, 3, 4, 5];

// Calculer la somme
const somme = nombres.reduce((acc, nombre) => {
    console.log(`acc: ${acc}, nombre: ${nombre}`);
    return acc + nombre;
}, 0);

console.log(somme); // 15

// Affichage du processus :
// acc: 0, nombre: 1  → retourne 1
// acc: 1, nombre: 2  → retourne 3
// acc: 3, nombre: 3  → retourne 6
// acc: 6, nombre: 4  → retourne 10
// acc: 10, nombre: 5 → retourne 15

💡 Exemples pratiques

Exemple 1 : Calculer la somme

const nombres = [1, 2, 3, 4, 5];
const somme = nombres.reduce((acc, n) => acc + n, 0);
console.log(somme); // 15

Exemple 2 : Calculer le produit

const nombres = [1, 2, 3, 4, 5];
const produit = nombres.reduce((acc, n) => acc * n, 1);
console.log(produit); // 120

Exemple 3 : Compter les occurrences (objet)

const fruits = ['pomme', 'banane', 'pomme', 'orange', 'banane', 'pomme'];

const compte = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});

console.log(compte);
// { pomme: 3, banane: 2, orange: 1 }

Exemple 4 : Trouver le maximum

const nombres = [5, 2, 8, 1, 9, 3];
const max = nombres.reduce((acc, n) => (n > acc ? n : acc));
console.log(max); // 9

Exemple 5 : Grouper des objets

const utilisateurs = [
    { nom: 'Eva', ville: 'Lyon' },
    { nom: 'Owen', ville: 'Paris' },
    { nom: 'Diane', ville: 'Lyon' },
    { nom: 'Alice', ville: 'Paris' },
];

const parVille = utilisateurs.reduce((acc, user) => {
    if (!acc[user.ville]) {
        acc[user.ville] = [];
    }
    acc[user.ville].push(user.nom);
    return acc;
}, {});

console.log(parVille);
// {
//   Lyon: ["Eva", "Diane"],
//   Paris: ["Owen", "Alice"]
// }

Exemple 6 : Aplatir un tableau

const tableaux = [
    [1, 2],
    [3, 4],
    [5, 6],
];
const aplati = tableaux.reduce((acc, arr) => acc.concat(arr), []);
console.log(aplati); // [1, 2, 3, 4, 5, 6]

⚠️ Points importants sur reduce

Point	Explication
Valeur initiale	Très important de la définir
Accumulateur	Accumule les résultats
Retour unique	Retourne une seule valeur
Ordre	Traite les éléments dans l’ordre

// SANS valeur initiale (risqué)
const nombres = [1, 2, 3];
const somme = nombres.reduce((acc, n) => acc + n);
// acc commence à 1, puis 2, puis 3

// AVEC valeur initiale (recommandé)
const somme2 = nombres.reduce((acc, n) => acc + n, 0);
// acc commence à 0

---

4️⃣ Événements FOCUS et BLUR

Qu’est-ce que focus et blur ?

• focus : L’élément reçoit l’attention (l’utilisateur clique ou utilise Tab)
• blur : L’élément perd l’attention (l’utilisateur clique ailleurs)

📝 Syntaxe

const input = document.querySelector('input');

// Quand l'input reçoit le focus
input.addEventListener('focus', () => {
    console.log('Focus reçu');
});

// Quand l'input perd le focus
input.addEventListener('blur', () => {
    console.log('Focus perdu');
});

💡 Exemples pratiques

Exemple 1 : Changer la couleur au focus

<input type="text" id="nom" placeholder="Entrez votre nom" />

<style>
    input.active {
        background-color: lightyellow;
        border: 2px solid blue;
    }
</style>

const input = document.getElementById('nom');

input.addEventListener('focus', () => {
    input.classList.add('active');
});

input.addEventListener('blur', () => {
    input.classList.remove('active');
});

Exemple 2 : Valider un email au blur

const emailInput = document.querySelector('input[type="email"]');

emailInput.addEventListener('blur', () => {
    const email = emailInput.value;

    if (!email.includes('@')) {
        emailInput.style.borderColor = 'red';
        console.log('Email invalide');
    } else {
        emailInput.style.borderColor = 'green';
        console.log('Email valide');
    }
});

Exemple 3 : Afficher/masquer un message d’aide

<input type="password" id="motDePasse" placeholder="Mot de passe" />
<p id="aide" style="display: none;">Le mot de passe doit contenir au moins 8 caractères</p>

const input = document.getElementById('motDePasse');
const aide = document.getElementById('aide');

input.addEventListener('focus', () => {
    aide.style.display = 'block';
});

input.addEventListener('blur', () => {
    aide.style.display = 'none';
});

Exemple 4 : Sauvegarder automatiquement

const textarea = document.querySelector('textarea');

textarea.addEventListener('blur', () => {
    const contenu = textarea.value;
    localStorage.setItem('brouillon', contenu);
    console.log('Brouillon sauvegardé');
});

textarea.addEventListener('focus', () => {
    const brouillon = localStorage.getItem('brouillon');
    if (brouillon) {
        textarea.value = brouillon;
    }
});

Exemple 5 : Compter les caractères

<input type="text" id="bio" placeholder="Votre bio" maxlength="100" />
<p id="compteur">0/100</p>

const input = document.getElementById('bio');
const compteur = document.getElementById('compteur');

input.addEventListener('focus', () => {
    compteur.style.display = 'block';
});

input.addEventListener('blur', () => {
    compteur.style.display = 'none';
});

input.addEventListener('input', () => {
    const longueur = input.value.length;
    compteur.textContent = `${longueur}/100`;
});

---

5️⃣ ForEach - Boucler sur les éléments

Qu’est-ce que forEach ?

forEach exécute une fonction pour chaque élément du tableau. C’est comme une boucle for mais plus moderne.

📝 Syntaxe

tableau.forEach((element, index) => {
    // Faire quelque chose
});

💡 Exemples pratiques

Exemple 1 : Ajouter un écouteur à plusieurs éléments

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

const boxes = document.querySelectorAll('.box');

boxes.forEach((box) => {
    box.addEventListener('click', () => {
        box.style.backgroundColor = 'blue';
    });
});

Exemple 2 : Afficher chaque élément

const fruits = ['pomme', 'banane', 'cerise'];

fruits.forEach((fruit, index) => {
    console.log(`${index + 1}. ${fruit}`);
});
// 1. pomme
// 2. banane
// 3. cerise

Exemple 3 : Modifier le style de plusieurs éléments

const boxes = document.querySelectorAll('.box');

boxes.forEach((box, index) => {
    box.style.transform = `scale(${1 - index * 0.1})`;
    box.style.opacity = `${1 - index * 0.1}`;
});

Exemple 4 : Ajouter des classes

const elements = document.querySelectorAll('p');

elements.forEach((el, index) => {
    if (index % 2 === 0) {
        el.classList.add('pair');
    } else {
        el.classList.add('impair');
    }
});

---

📊 Comparaison : Map vs Filter vs Reduce

Méthode	Utilité	Retour	Exemple
map	Transformer	Nouveau tableau	[1,2,3].map(n => n*2) → [2,4,6]
filter	Sélectionner	Nouveau tableau	[1,2,3].filter(n => n>1) → [2,3]
reduce	Agréger	Une seule valeur	[1,2,3].reduce((a,n) => a+n, 0) → 6
forEach	Boucler	Rien	Exécute pour chaque élément

---

Combinaisons pratiques

Utiliser map et filter ensemble

const utilisateurs = [
    { nom: 'Eva', age: 25, ville: 'Lyon' },
    { nom: 'Owen', age: 30, ville: 'Paris' },
    { nom: 'Diane', age: 28, ville: 'Lyon' },
    { nom: 'Alice', age: 22, ville: 'Paris' },
];

// Récupérer les noms des utilisateurs de plus de 25 ans
const nomsAdultes = utilisateurs.filter((user) => user.age > 25).map((user) => user.nom);

console.log(nomsAdultes); // ["Owen", "Diane"]

Utiliser filter et reduce ensemble

const produits = [
    { nom: 'iPhone', prix: 999, categorie: 'electronique' },
    { nom: 'Livre', prix: 15, categorie: 'culture' },
    { nom: 'MacBook', prix: 1499, categorie: 'electronique' },
    { nom: 'Stylo', prix: 2, categorie: 'fourniture' },
];

// Calculer le prix total des produits électroniques
const totalElectronique = produits.filter((p) => p.categorie === 'electronique').reduce((acc, p) => acc + p.prix, 0);

console.log(totalElectronique); // 2498

Utiliser map, filter et reduce ensemble

const commandes = [
    { id: 1, articles: [{ prix: 10 }, { prix: 20 }] },
    { id: 2, articles: [{ prix: 5 }] },
    { id: 3, articles: [{ prix: 100 }, { prix: 50 }] },
];

// Calculer le total des commandes avec plus de 1 article
const total = commandes
    .filter((cmd) => cmd.articles.length > 1)
    .map((cmd) => cmd.articles.reduce((acc, art) => acc + art.prix, 0))
    .reduce((acc, prix) => acc + prix, 0);

console.log(total); // 180

---

🎓 Résumé des points clés

✅ map = Transformer chaque élément ✅ filter = Garder seulement certains éléments ✅ reduce = Combiner tous les éléments en une valeur ✅ forEach = Faire quelque chose pour chaque élément ✅ focus = Élément reçoit l’attention ✅ blur = Élément perd l’attention