Qu'est-ce que reduce en JavaScript ?

Vous ne savez pas utiliser la méthode reduce ? Vous voulez créer une valeur à partir d’un tableau de manière élégante ?

Alors ce guide sur reduce destiné aux débutants en JavaScript est fait pour vous.

En JavaScript, la méthode reduce() est utilisée pour réduire un tableau en une seule valeur en exécutant une fonction donnée. La valeur retournée par la fonction est stockée dans ce qu’on appelle un “accumulateur”.

Après avoir lu cet article, vous serez capable :

• d’utiliser la méthode reduce
• de savoir quand utiliser reduce
• de comprendre les accumulateurs

Partons sans plus tarder à la découverte de la méthode reduce en JavaScript !

Comment utiliser la fonction reduce en JavaScript ?

1. Prenons un tableau avec 3 valeurs : [1, 2, 3].
2. Ensuite déclarons notre fonction somme : (a, b) => a + b
3. Finalement, ajoutons la valeur par défault en second paramètre de la méthode reduce.

Une fois la méthode exécutée, on obtient 6, la somme de 1 + 2 + 3.

;[1, 2, 3].reduce((a, b) => a + b, 0)

// 6

Quand utiliser reduce en JavaScript ?

Les cas d’utilisation de la méthode reduce sont variés en JavaScript. On peut l’utiliser pour additionner des valeurs dans une nouvelle variable ou bien utiliser la méthode de manière beaucoup plus complexe. On utilise reduce quand on veut créer une nouvelle variable à partir d’un objet.

Comment utiliser la méthode reduce en JavaScript ?

reduce prend plusieurs formes et on peut lui passer un certain nombre de paramètres.

1. En lui passant un callback:

tableau.reduce(callbackFn)
tableau.reduce(callbackFn, initialValue)

2. En utilisant des Arrow functions :

tableau.reduce((accumulateur, valeurCourante) => {})
tableau.reduce((accumulateur, valeurCourante, index) => {})
tableau.reduce((accumulateur, valeurCourante, index, tableauComplet) => {})
tableau.reduce((accumulateur, valeurCourante, index, tableauComplet) => {},
valeurInitiale)

3. En utilisant fonction à l’ancienne :

tableau.reduce(function (acc, valeur) {})
tableau.reduce(function (acc, valeur, index) {})
tableau.reduce(function (acc, valeur, index, tableauComplet) {})
tableau.reduce(function (acc, valeur, index, tableauComplet) {}, valeurInitiale)

Est-ce que reduce retourne un array ?

Reduce applique une fonction à un accumulateur et chaque valeur du tableau (array) est réduite à une seule valeur. Vous pouvez donc donc manipuler la méthode en utilisant des éléments d’un tableau pour que reduce retourne un array.

Qu’est-ce qu’un accumulateur en JavaScript ?

Un accumulateur est la valeur retournée par l’itération précendente. À la première itération de reduce, l’accumulateur aura la valeur du second paramètre de la méthode. Ensuite, on ajoutera la valeur courante à l’accumulateur dans le callback à chaque itération de reduce.

Comment transformer un tableau d’objets en un seul objet ?

Prenons un array d’objets en JavaScript qu’on voudrait transformer en un seul objet qui a comme clé un id et comme valeur le nom d’un langage de programmation :

const langages = [
  {
    id: 1,
    name: "Python",
  },
  {
    id: 2,
    nom: "JavaScript",
  },
  {
    id: 3,
    nom: "Rust",
  },
]

Pour réduire ce tableau d’objets en un seul objet, on peut appliquer la méthode au tableau langages comme suit :

const langagesObject = langages.reduce((accumulateur, ObjetCourant) => {
  return Object.assign(ancienObject, {
    [ObjetCourant.id]: ObjetCourant.nom,
  })
}, {}) // {} est notre valeur par défaut, un tableau vide dans lequel va etre ajouté chaque valeur à chaque passage de la boucle

console.log(langagesObject)

// { 1 : 'Python', 2 : 'JavaScript', 3 : 'Rust' }

Et en version plus moderne ES6, on peut utiliser la deconstruction de l’accumulateur (a) et ajouter la valeur courante (b) :

const langagesObject = langages.reduce((a, b) => ({ ...a, [b.id]: b.nom }), {})

console.log(langagesObject)
// { 1 : 'Python', 2 : 'JavaScript', 3 : 'Rust' }

Aller plus loin avec la méthode reduce en JavaScript

Félicitations ! Vous savez maintenant comment utiliser la méthode reduce en JavaScript.

Savoir utiliser des méthodes comme reduce est fondamental pour devenir compétent en JavaScript.

Il existe plein d’autres fonctions et méthodes indispensables que tout développeur JS devrait connaître !

Les lecteurs de ce blog ont aussi aimé :

Le Cheat Sheet à avoir sous la main pour JavaScript

Les meilleurs Livres pour apprendre JavaScript

Les meilleures formations JS en 2024

Les Librairies et Frameworks à connaître absolument en JS

Apprendre React JS en 2024

Votre propre bot discord en JS