Go to Hackademy website

Chérie, j'ai reduce les tableaux

Tom Panier

Posté par dans la catégorie front

Depuis un peu plus d’un an que j’écris sur ce blog, je vous ai surtout parlé de Vue.js, ou encore d’outils comme ESLint ; mais tous les bons artisans vous le diront, avoir le meilleur marteau du monde n’interdit pas de s’écraser les doigts !

Aujourd’hui, laissons donc de côté le strass et les paillettes et mettons les deux mains dans le cambouis : en tant que développeur·se JavaScript, à quel point maîtrisez-vous votre langage préféré ? Savez-vous vraiment utiliser Array.prototype.reduce ?

J'ai reduce les tableaux

Ça fait peur…

…et c’est bien dommage, car utiliser cette fonction est diablement simple une fois qu’on a compris comment elle marche !

En deux mots, reduce a pour objectif de transformer un tableau en n’importe quoi d’autre, en itérant progressivement sur ce tableau et en apportant des modifications successives à un accumulateur, ce dernier constituant au final la valeur de retour ! C’est plus clair ?

…Non ? Bon, prenons un exemple tout bête :

const values = [1, 2, 3, 4];

Quelle est selon vous la manière la plus simple de calculer la somme d’un tableau de Number ?

let sum = 0;

values.forEach(value => {
  sum += value;
});

Ça fonctionne, mais il y a plus simple, vous vous en doutez, avec reduce :

const sum = values.reduce((acc, cur) => acc + cur, 0);

Décomposons cette petite ligne de code :

  • reduce prend en premier paramètre une fonction, appelée sur chacun des éléments de values
  • celle-ci prend deux paramètres : un accumulateur (typiquement noté acc) et une valeur courante (typiquement notée cur), à savoir l’élément courant dans values
  • la valeur retournée par la fonction sera la valeur d’acc au tour de boucle suivant
  • enfin, le second paramètre de reduce donne la valeur de départ d’acc (qui en a besoin au premier tour de boucle puisque notre fonction n’a pas encore été exécutée)

Vous l’aurez donc compris, au premier tour de boucle, la fonction renverra 1 (0 + 1), au second 3 (1 + 2), au troisième 6 (3 + 3) et au quatrième 10 (6 + 4), ce qui sera également la valeur de sum en fin d’exécution !

La notion d’accumulateur doit désormais vous paraître plus claire, et le fonctionnement de reduce lui-même également, de fait ! Afin de vous familiariser avec, voyons ensemble des cas d’utilisation plus complexes, qui vous démontreront toute sa puissance.

D’objet à tableau

On peut parfois avoir besoin de transformer un objet en tableau :

const obj = {
  foo: { value: "bar" },
  bar: { value: "baz" }
};

Pour ce faire, nous allons utiliser Object.keys afin de pouvoir itérer sur le tableau contenant les clés de notre objet :

Object.keys(obj).reduce((acc, key) => [...acc, { key, value: obj[key].value }], []);

La décomposition (...) utilisée sur acc revient au même qu’appeler concat dessus.

Notre objet initial devient donc le tableau suivant :

[
  { key: "foo", value: "bar" },
  { key: "bar", value: "baz" }
]

Valider un tableau (ou un objet)

La fonction peut également servir à obtenir un booléen après avoir parcouru l’intégralité d’un tableau (ou d’un objet), en validant tel ou tel aspect de chaque élément :

const allInputsAreFilled = Array.from(document.querySelectorAll("input")).reduce((acc, cur) => acc && !!cur.value, true);

Effectuer des remplacements dynamiques dans une chaîne

reduce peut aussi être utile dans un tel cas :

const obj = {
  foo: "Jean-Pierre",
  bar: "Thierry",
  baz: "Gaston"
};

const subject = "{foo} dit alors à {bar} que c'était la faute de {baz}.";

Comme dans l’exemple précédent, tirons parti d’Object.keys :

Object.keys(obj).reduce((acc, cur) => acc.replace(new RegExp(`{${cur}}`), obj[cur]), subject);

Et voici le résultat :

"Jean-Pierre dit alors à Thierry que c'était la faute de Gaston."

Bien évidemment, ce pattern s’avère en pratique plus pertinent sur de la gestion d’URLs, par exemple.

Agréger les objets d’un tableau

Imaginons ensuite un tableau d’objets, que l’on souhaite agréger en fonction d’une de leurs clés :

const tasks = [
  { id: 1, label: "foo", state: "open" },
  { id: 2, label: "bar", state: "close" },
  { id: 3, label: "baz", state: "open" },
  { id: 4, label: "qux", state: "open" },
  { id: 5, label: "kek", state: "close" }
];
tasks.reduce((acc, cur) => {
  if (!(cur.state in acc)) {
    acc[cur.state] = [];
  }

  acc[cur.state].push(cur);

  return acc;
}, {});

Ce qui nous donne :

{
  open: [
    { id: 1, label: "foo", state: "open" },
    { id: 3, label: "baz", state: "open" },
    { id: 4, label: "qux", state: "open" }
  ],
  close: [
    { id: 2, label: "bar", state: "close" },
    { id: 5, label: "kek", state: "close" }
  ]
}

En tirant parti de la décomposition, notre reduce peut par ailleurs être écrit de manière plus concise :

tasks.reduce((acc, cur) => ({
  ...acc,
  ...{ [cur.state]: [...acc[cur.state] || [], cur] }
}), {});

Appliquer récursivement un traitement sur un objet complexe

Prenons enfin l’objet suivant, en partant du principe que nous voulons remplacer toutes les occurrences de "non" par "oui" :

const obj = {
  foo: "non",
  bar: {
    baz: "non",
    uno: 1,
    qux: {
      kek: "non",
      dos: 2,
      arr: [3, "non", { foo: "non", bar: "baz" }]
    }
  }
};
function processValue(value) {
  if (typeof value === "object") { // objet ou tableau
    return processValues(value);
  }

  return value === "non" ? "oui" : value; // le traitement effectif
}

function processValues(values) {
  return Object.keys(values).reduce((acc, cur) => {
    if (Array.isArray(values[cur])) {
      return { ...acc, [cur]: values[cur].map(item => processValue(item)) };
    }

    return { ...acc, [cur]: processValue(values[cur]) };
  }, {});
}

processValues(obj);

Le résultat est à la hauteur de nos espérances :

{
  foo: "oui",
  bar: {
    baz: "oui",
    uno: 1,
    qux: {
      kek: "oui",
      dos: 2,
      arr: [3, "oui", { foo: "oui", bar: "baz" }]
    }
  }
}

Gai mauve heure

J’espère de tout cœur que ces quelques exemples vous auront donné une meilleure idée des cas d’usage d’Array.prototype.reduce ! N’oubliez pas que les tableaux en JavaScript ont une armada d’autres méthodes à disposition, lesquelles se combineront fort efficacement avec celle que nous venons de voir (map, filter…).

Si, par le plus grand des hasards, vous utilisez Vue.js (ou un autre framework du même acabit, tel React), reduce sera un allié de poids dans la définition de vos computeds, notamment — et je ne parle même pas de Redux et de ses reducers, des noms qui devraient normalement commencer à vous rappeler quelque chose ;)

Je vais vous laisser bricoler avec tout ça, et vous donner rendez-vous très prochainement pour un nouvel article !


L’équipe Synbioz.
Libres d’être ensemble.

Articles connexes

Introduction à Vue.js — construisons une Memebox

07/12/2017

Si vous êtes un tant soit peu comme moi, il y a fort à parier que votre communication en ligne est fortement axée sur le visuel. Mes collègues diraient plutôt que j’inonde les canaux Slacks et les merge requests avec des GIFs stupides, plutôt que de…

Un code JS impeccable grâce à ESLint

06/09/2018

Après avoir vu ensemble comment écrire des tests unitaires pour votre application JavaScript, on pourrait s’imaginer que notre codebase a atteint le pinacle de la qualité. C’est sans compter sur les obsessions maniaques de votre serviteur (c’est moi…

Afficher plus Afficher moins

Commentaires (3) Flux RSS des commentaires

  • 14/10/2018 à 07:36

    Bob Maerten

    Sympa ce genre d'article un peu plus généraliste.

    Punaise, la décomposition JS c'est pas évident. Ça me rappelle le mal que j'ai eu à l'époque intégrer la syntaxe raccourcie des enumerators en ruby mais x1000 (`array.each { |e| e.action }` => `array.each(&:action)`.

    Alors peut-être que ça viendra mais le ratio compréhensibilité/compacité n'est à ce jour pour moi pas en faveur de la décomposition.

    PS: petite coquille sur `const sum = 0` il me semble qu'il faille mettre un `let` à la place.

  • 15/10/2018 à 07:57

    Tom Panier

    Hello Bob, et merci pour ton commentaire !

    Tu as absolument raison concernant `sum`, il fallait utiliser `let` ! On rectifie ça au plus vite.

    Pour ce qui est de la décomposition, je comprends tout à fait que la lecture puisse être difficile au premier abord, c'est un coup à prendre ! Je trouve toutefois cela plus simple qu'`Object.assign` ou `concat`, qui sont avantageusement remplacés par cette nouvelle syntaxe. Après, trop de concision tue la lisibilité, et l'équilibre est différent pour chaque personne. Étant moi-même très friand de cette syntaxe, j'ai toutefois tâché de ne pas utiliser d'exemple trop velu, ou au moins de les présenter sous une autre écriture pour en faciliter la compréhension. D'une manière générale, ça aide de simplement se dire "dans cet objet / ce tableau déclaré littéralement, je mets tous les éléments de cet autre objet / tableau" :)

  • 17/10/2018 à 20:11

    Sébastien Castiel

    Je suis vraiment un fan de `reduce` pour ma part, qui permet de faire des choses vraiment cool de manière très élégante. Cependant je m’en méfie également car même en ayant l’habitude, la lisibilité est pas top ;)

    C’est pourquoi je préfère l’utiliser dans des méthodes utilitaires (qui ne font généralement qu’un `reduce`, éventuellement couplé à du `map` ou `filter`) plutôt que dans du code métier, qui doit être compréhensible au premier coup d’œil :)

Ajouter un commentaire