Object.groupBy()

items

Un itérable (comme un tableau (Array)) dont les éléments seront groupés.

fnRappel

Une fonction à exécuter pour chaque élément de l'itérable. Cette fonction devrait renvoyer une valeur qui peut être convertie en une clé de propriété (c'est-à-dire une chaîne de caractères ou un symbole) indiquant le groupe de l'élément courant. Cette fonction est appelée avec les arguments suivants :

element

L'élément courant qui est traité.

index

L'indice de l'élément courant qui est traité.

Un objet avec un prototype null avec une propriété pour chaque groupe, qui contient un tableau des éléments du groupe correspondant.

Object.groupBy() appelle une fonction de rappel fnRappel() sur chaque élément de l'itérable. Cette fonction renvoie alors une chaîne de caractères ou un symbole (sinon la valeur est convertie en chaîne de caractères) qui indique le groupe de l'élément. Les valeurs renvoyées par fnRappel() sont utilisées comme clés pour l'objet renvoyé par Object.groupBy(). La valeur de chaque propriété est un tableau dont les éléments sont ceux pour lesquels la fonction de rappel a renvoyé la même valeur.

Les éléments de l'objet renvoyé et de l'itérable original sont les mêmes (il ne s'agit pas de copies profondes). Modifier la structure interne des éléments sera reflété à la fois sur l'itérable original et sur l'objet renvoyé.

Pour commencer, on définit un tableau contenant un inventaire d'aliments. Chaque aliment possède un nom, un type et une quantité.

const inventaire = [
  { nom: "asperges", type: "légumes", quantite: 5 },
  { nom: "bananes", type: "fruit", quantite: 0 },
  { nom: "agneau", type: "viande", quantite: 23 },
  { nom: "cerises", type: "fruit", quantite: 5 },
  { nom: "poisson", type: "viande", quantite: 22 },
];

L'instruction suivante groupera les éléments selon leur propriété type.

const resultat = Object.groupBy(inventaire, ({ type }) => type);

/* Le résultat sera :
{
  légumes: [
    { nom: 'asperges', type: 'légumes', quantite: 5 },
  ],
  fruit: [
    { nom: "bananes", type: "fruit", quantite: 0 },
    { nom: "cerises", type: "fruit", quantite: 5 }
  ],
  viande: [
    { nom: "agneau", type: "viande", quantite: 23 },
    { nom: "poisson", type: "viande", quantite: 22 }
  ]
}
*/

La fonction fléchée renvoie la valeur de type pour chaque élément du tableau. On notera que l'argument { type } est un exemple de la syntaxe de décomposition d'objet pour les arguments de fonction. Cela extrait la propriété type d'un objet passé en paramètre et affecte la valeur à une variable nommée type dans le corps de la fonction. On peut ainsi écrire succinctement l'accès aux propriétés d'un élément dans une fonction.

On pourrait également créer des groupes selon les valeurs d'une ou plusieurs propriétés de l'élément. Dans l'exemple qui suit, on place les aliments dans deux groupes ok ou restock selon la valeur de leur propriété quantite.

function maFonctionDeRappel({ quantite }) {
  return quantite > 5 ? "ok" : "restock";
}

const resultat2 = Object.groupBy(inventaire, maFonctionDeRappel);

/* Le résultat sera :
{
  restock: [
    { nom: "asperges", type: "légumes", quantite: 5 },
    { nom: "bananes", type: "fruit", quantite: 0 },
    { nom: "cerises", type: "fruit", quantite: 5 }
  ],
  ok: [
    { nom: "agneau", type: "viande", quantite: 23 },
    { nom: "poisson", type: "viande", quantite: 22 }
  ]
}
*/

• Une prothèse d'émulation (polyfill) de Object.groupBy() dans la bibliothèque tierce core-js
• Le guide sur les collections indexées
• Array.prototype.reduce()
• Object.fromEntries()
• Map.groupBy()