🥳 It is finally out! No more need to write ugly code to group an array of objects by a specific value of a field!
Since late 2023, there is an official static method for Object
called groupBy()
that does it for us!
It accepts an Iterable
, such as an Array
, and a function, which is executed for each element and must return the "category" of that specific element.
The method returns a new Object
where each key is a different category that contains an array of objects belonging to that specific category.
NOTE: The elements in the returned object and the original iterable are the same (not deep copies!). Changing the internal structure of the elements will be reflected in both the original iterable and the returned object.
Example
Let's give a practical example to see how easy it is to group all the Ninja Turtles characters by age.
The initial Array
const ninjaTurtlesCharacters = [
{ age: 16, name: 'Michelangelo' },
{ age: 16, name: 'Raffaello' },
{ age: 16, name: 'Donatello' },
{ age: 16, name: 'Leonardo' },
{ age: 91, name: 'Splinter' },
{ age: 25, name: 'Casey Jones' },
{ age: 25, name: 'April O\'Neil' }
];
The good OLD way (with reduce
)
const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
(groupedPeople, item) => ({
...groupedPeople,
[item.age]: groupedPeople[item.age]
? [...groupedPeople[item.age], item]
: [item],
}),
{}
);
The MODERN way
const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
ninjaTurtlesCharacters,
({ age }) => age
);
Tip: use
Map.groupBy()
if you want to return aMap
instead of anObject
The result
{
"16": [
{ age: 16, name: 'Michelangelo' },
{ age: 16, name: 'Raffaello' },
{ age: 16, name: 'Donatello' },
{ age: 16, name: 'Leonardo' }
],
"25": [
{ age: 25, name: 'Casey Jones' },
{ age: 25, name: 'April O\'Neil' }
],
"91": [
{ age: 91, name: 'Splinter' }
]
}
Demo
🧑🏻💻 As usual, I created a simple Stackblitz prject to play with the code.
🗄 Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
ℹ Browser support: https://caniuse.com/mdn-javascript_builtins_object_groupby
Top comments (0)