La méthode Reduce

Fait partie de la section Logique & Flux du Journey JavaScript de Coddy — leçon 54 sur 65.

La méthode reduce() vous permet de « réduire » un tableau à une seule valeur en exécutant une fonction fournie pour chaque élément du tableau. Cette valeur unique peut être un nombre, une chaîne de caractères, un objet ou même un autre tableau.

Voici la syntaxe du reducer :

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // retourne la valeur mise à jour de l'accumulateur
}, initialValue);

Composants clés :

accumulator : Accumule les valeurs de retour de la fonction de rappel (considérez-le comme le total cumulé)

currentValue : L'élément actuel en cours de traitement dans le tableau

currentIndex : (optionnel) L'index de l'élément actuel

array : (facultatif) Le tableau sur lequel reduce() a été appelé

initialValue : (optionnel) Une valeur à utiliser comme premier argument lors du premier appel de la fonction de rappel

Par exemple - somme de nombres :

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

Comment ça fonctionne étape par étape :

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// Sortie :
// Accumulateur : 0, Valeur actuelle : 1
// Accumulateur : 1, Valeur actuelle : 2
// Accumulateur : 3, Valeur actuelle : 3
// Accumulateur : 6, Valeur actuelle : 4
// Résultat final : 10

Défi

Facile

Créez une fonction nommée calculateGroceryTotal qui prend un tableau d'objets représentant des articles d'épicerie.

Chaque objet possède deux propriétés :

name : string (nom de l'article)
price : number (prix de l'article)

La fonction doit :

Calculer le coût total de tous les articles
Appliquer une remise : - Si le total est supérieur à 100, appliquer une remise de 10 %
Si le total est supérieur à 50 mais inférieur ou égal à 100, appliquer une remise de 5 %
Aucune remise pour les totaux de 50 ou moins.

Retourner un objet contenant :

originalTotal : la somme avant remise
discount : le montant économisé
finalTotal : le montant final après remise

Aide-mémoire

La méthode reduce() réduit un tableau à une seule valeur en exécutant une fonction pour chaque élément :

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // retourne la valeur mise à jour de l'accumulateur
}, initialValue);

Composants clés :

accumulator : Accumule les valeurs de retour de la fonction de rappel (total cumulé)
currentValue : L'élément actuel en cours de traitement
currentIndex : (optionnel) L'index de l'élément actuel
array : (optionnel) Le tableau sur lequel reduce() a été appelé
initialValue : (optionnel) Valeur de départ pour l'accumulateur

Exemple - somme de nombres :

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

Exécution étape par étape :

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// Sortie :
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Résultat final : 10

Essayez vous-même

function calculateGroceryTotal(items) {
    // Écrivez le code ici
    


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // Arrondir à 2 décimales
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}