JavaScript - la méthode Reduce

La méthode reduce() est une fonctionnalité puissante de JavaScript qui permet de réduire un tableau à une seule valeur en appliquant une opération à chaque élément du tableau.

Si vous êtes un développeur ou une développeuse JavaScript avancé, vous avez probablement déjà rencontré cette méthode.

Dans cet article, nous allons plonger dans son fonctionnement, en examinant ses aspects fondamentaux et en explorant des cas d'utilisation avancés.

Signature de la méthode

La méthode reduce() a la signature suivante :

array.reduce(callback(accumulateur, valeurCourante, index, tableau), valeurInitiale);

• callback: Une fonction qui est appelée pour chaque élément du tableau. Cette fonction prend quatre arguments :
  • accumulateur : La valeur accumulée jusqu'à présent.
  • valeurCourante : La valeur de l'élément actuel du tableau.
  • index : L'index de l'élément actuel dans le tableau (optionnel).
  • tableau : Le tableau sur lequel reduce() est appelé (optionnel).
• valeurInitiale : Une valeur initiale optionnelle qui est utilisée comme valeur initiale de l'accumulateur lors de la première itération. Si cette valeur n'est pas fournie, le premier élément du tableau sera utilisé comme valeur initiale et la boucle commencera à partir du deuxième élément.

Fonctionnement

1. La fonction callback est appelée pour chaque élément du tableau, à partir du premier élément (ou avec la valeur initiale si elle est fournie).
2. À chaque appel de la fonction callback, l'accumulateur est mis à jour en fonction du résultat du callback. L'accumulateur stocke la valeur accumulée jusqu'à présent.
3. La boucle continue jusqu'à ce que tous les éléments du tableau aient été traités.
4. À la fin de l'itération, la méthode reduce() renvoie la valeur finale de l'accumulateur.

Exemple d'utilisation basique

Voici l’exemple le plus simple d'utilisation de reduce() : calculer la somme des éléments d'un tableau :

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

Dans cet exemple, nous avons fourni une fonction de rappel qui ajoute la valeur actuelle à l'accumulateur à chaque itération, en commençant par une valeur initiale de 0.

Cas d’utilisation

La méthode reduce() en JavaScript est très polyvalente et peut être utilisée pour une variété de tâches. Voici quelques exemples d'utilisation de reduce() dans différents contextes :

Grouper des éléments d'un tableau

Vous pouvez utiliser reduce() pour regrouper des éléments d'un tableau en fonction de certaines propriétés. Par exemple, supposez que vous ayez un tableau d'objets représentant des étudiants et que vous souhaitiez les regrouper par classe.

const students = [
  { name: 'Alice', class: 'A' },
  { name: 'Bob', class: 'B' },
  { name: 'Charlie', class: 'A' },
  // ...
];

const groupedByClass = students.reduce((acc, current) => {
  const className = current.class;
  if (!acc[className]) acc[className] = [];

  acc[className].push(current);
  return acc;
}, {});

console.log(groupedByClass);
// {
//   A: [{ name: "Alice", class: "A" }, { name: "Charlie", class: "A" }],
//   B: [{ name: "Bob", class: "B" }]
// }

Calcul de statistiques

Vous pouvez utiliser reduce() pour calculer des statistiques à partir de données. Par exemple, pour trouver la moyenne et l'écart-type d'un ensemble de données numériques.

const data = [10, 20, 30, 40, 50];

const stats = data.reduce(
  (acc, current) => {
    acc.sum += current;
    acc.squareSum += current * current;
    return acc;
  },
  { sum: 0, squareSum: 0 }
);

const mean = stats.sum / data.length;
const variance = stats.squareSum / data.length - mean * mean;
const stdDeviation = Math.sqrt(variance);

console.log(mean); // Moyenne
console.log(stdDeviation); // Écart-type

Construction d'un objet à partir d'un tableau

Vous pouvez utiliser reduce() pour construire un objet à partir d'un tableau, en utilisant les éléments du tableau comme clés ou valeurs.

const pairs = [
  ['a', 1],
  ['b', 2],
  ['c', 3],
];

const obj = pairs.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});

console.log(obj); //{ "a": 1, "b": 2, "c": 3 }

Cas d'utilisation avancés

Recherche de la plus longue séquence de caractères identiques

Utilisez reduce() pour trouver la plus longue séquence de caractères identiques dans une chaîne.

const text = 'aaabbccccccdddddddd';
const longestSequence = text.split('').reduce(
  (acc, current) => {
    if (current === acc.currentChar) {
      acc.currentCount++;
      if (acc.currentCount > acc.maxCount) {
        acc.maxCount = acc.currentCount;
        acc.maxLength = acc.currentCount * current.length;
      }
    } else {
      acc.currentChar = current;
      acc.currentCount = 1;
    }
    return acc;
  },
  { currentChar: '', currentCount: 0, maxCount: 0, maxLength: 0 }
);
console.log(longestSequence);
// { currentChar: "d", currentCount: 8, maxCount: 8, maxLength: 8 }

Gestion de requêtes complexes dans une base de données

En utilisant reduce(), vous pouvez gérer des requêtes complexes et générer dynamiquement des requêtes SQL en fonction de filtres et de conditions.

const filters = [
  { field: 'age', operator: '>', value: 30 },
  { field: 'country', operator: '=', value: 'USA' },
  // ...
];

const query = filters.reduce((acc, filter, index) => {
  const condition = `${filter.field} ${filter.operator} "${filter.value}"`;
  if (index === 0) {
    return `SELECT * FROM table WHERE ${condition}`;
  } else {
    return `${acc} AND ${condition}`;
  }
}, '');

console.log(query);
// SELECT * FROM table WHERE age > "30" AND country = "USA"

Construction d'un pipe

La construction d'un pipe (ou chaîne de fonctions) à partir de la méthode reduce() est un moyen élégant d'appliquer une série de fonctions à une valeur d'entrée, où la sortie de chaque fonction devient l'entrée de la suivante. Cela peut être utile pour organiser et exécuter des opérations de manière séquentielle.

const users = [
  { id: 1, name: 'Alice', age: 28, country: 'USA' },
  { id: 2, name: 'Bob', age: 35, country: 'Canada' },
  { id: 3, name: 'Charlie', age: 22, country: 'USA' },
  { id: 4, name: 'David', age: 40, country: 'UK' },
  { id: 5, name: 'Eve', age: 30, country: 'Canada' },
];

const filters = [
  (users) => users.filter((user) => user.age >= 30),
  (users) => users.filter((user) => user.country === 'USA'),
];

const filteredUsers = filters.reduce((acc, filter) => filter(acc), users);

console.log(filteredUsers);
// [{ id: 1, name: "Alice", age: 28, country: "USA" }]

Dans cet exemple, nous avons une série de filtres stockés dans un tableau filters. Chaque filtre est une fonction qui prend un tableau d'utilisateurs en entrée et renvoie un sous-ensemble filtré de ces utilisateurs en fonction de certains critères.

Nous utilisons ensuite reduce() pour appliquer séquentiellement chaque filtre à partir de la valeur initiale users. À chaque itération, le filtre actuel est appliqué à la sortie du filtre précédent, et ainsi de suite. Le résultat final (filteredUsers) est le sous-ensemble d'utilisateurs qui répondent à tous les critères de filtrage.

Erreurs courantes et bonnes pratiques

Lorsque vous utilisez reduce(), il y a quelques erreurs courantes à éviter. Assurez-vous de toujours fournir une valeur initiale si nécessaire, sinon, le premier élément du tableau sera utilisé comme valeur initiale.

Gardez votre code lisible en choisissant des noms de variable explicites pour l'accumulateur et la valeur courante.

Si vous avez des cas d'utilisation plus simples qui peuvent être résolus avec map(), filter(), ou d'autres méthodes, utilisez-les plutôt, car elles sont souvent plus lisibles et plus efficaces pour des opérations simples.

Si votre utilisation de reduce() est complexe, commentez votre code pour expliquer clairement ce que fait la fonction de rappel. Cela facilite la compréhension pour les autres et pour vous-même lorsque vous relisez le code.

Conclusion

La méthode reduce() est extrêmement polyvalente et peut être utilisée pour effectuer des opérations telles que la transformation, le filtrage, le regroupement de données, le calcul de statistiques, etc. Elle est souvent utilisée pour résoudre des problèmes de traitement de données complexes.

Elle peut paraitre difficile à comprendre au début, mais c'est une méthode puissante et essentiel en JavaSCript.