https://pixabay.com/photos/raindrop-leaves-nature-green-8436359/

ECMA script 2023 introduces one new amazing function Object.groupBy() which is indeed making it easier to group the elements of an array, earlier we have to implement our logic to group the elements which are complex to understand sometimes.

Let’s understand how grouping is done.

const people = [
  { name: "saurav", gender: "Male" },
  { name: "alia", gender: "Female" },
  { name: "Ankit", gender: "Male" },
];

Suppose I want to group the elements of an array by gender.

//Expected Output
{
  Male: [
    { name: 'saurav', gender: 'Male' },
    { name: 'Ankit', gender: 'Male' }
  ],
  Female: [ { name: 'alia', gender: 'Female' } ]
}

There are multiple ways to achieve this one of them is using reduce()

const people = [
  { name: "saurav", gender: "Male" },
  { name: "alia", gender: "Female" },
  { name: "Ankit", gender: "Male" },
];

const result = people.reduce((persons, currentPerson) => {
  const { gender } = currentPerson;
  persons[gender] = persons[gender] ?? [];
  persons[gender].push(currentPerson);
  return persons;
}, {});
console.info(result);

Now we don’t need to implement the entire logic instead we can use Object.groupBy(), it will give you the same result, let’s see how it is

Syntax:

Object.groupBy(item,callback)

item: array which needs to be grouped
callback: this callback function will iterate over each element of array and create a group.

const people = [
  { name: "saurav", gender: "Male" },
  { name: "alia", gender: "Female" },
  { name: "Ankit", gender: "Male" },
];
const result = Object.groupBy(people, ({ gender }) => gender);
console.info(result); 

Object.groupBy(item,callback)

Note:
(1) This method is newly introduced that’s why having compatibility issues.
(2) This will return a shallow copy.
(3) If you want to use Map, refer to Map.groupBy().

I hope this article helps you to understand Object.groupBy(item, callback), stay tuned for more such content.

Saurav Kumar Sharma