Array grouping is a reasonably basic operation in any project. Except fair no longer too prolonged in the past, we had to resort to both writing our have implementation or using third-celebration libraries when looking out to GroupBy on an array of objects in JavaScript.

That can quickly no longer be wished since a local implementation has been presented in the accomplish of Array.prototype.groupBy. And it’s in stage 3 now!

– Advertisement –

To originate using it on the present time, we can employ the polyfill provided by core-js

Array.prototype.groupBy

Array.groupBy returns an object where each and every property has the principle as the price returned by the arrow characteristic and price as an array of objects matching the factors.

const groupedObject = array.groupBy((item, index, array) => {
  // ...
  return groupNameAsString;
});

The callback must always return a string which may per chance per chance be the group establish (JavaScript objects will must always appreciate keys as names or Symbols may per chance per chance even be worn as successfully).

Examples

Let us take now we appreciate the following array of objects:

const of us = [
   { name: 'Saransh', age: 21 },
   { name: 'Wisdom', age: 20 },
   { name: 'Geek', age: 20 }
];

And we want to group them by their age:

const groupByAge = of us.groupBy(person => {
  return person.age;
});

console.log(groupByAge); 

// {
//   '20': [
//     { name: 'Wisdom', age: 20 },
//     { name: 'Geek', age: 20 },
//   ],
//   '21': [
//     { name: 'Saransh', age: 21 },
//   ]
// }

An example of grouping a straightforward array of numbers into queer and even numbers:

const array = [1, 2, 3, 4, 5];

const oddEvenGroups = array.groupBy((num, index, array) => {
  return num % 2 === 0 ? 'even': 'queer';
});

console.log(oddEvenGroups);

// { queer: [1, 3, 5], even: [2, 4] }

Array.prototype.groupByToMap

There are instances where you will desire a Design as an alternate of a straightforward JavaScript object. The valuable profit is that the keys are then no longer forced to be strings. The keys of the Design may per chance per chance even be of any records form.

groupByToMap works precisely just like the groupBy device, the ideal difference is that it returns a Design.

const groupByAge = of us.groupByToMap(person => {
  return person.age;
});

console.log(groupByAge); 

// Design([
//   [20, [
//     { name: 'Wisdom', age: 20 }, 
//     { name: 'Geek', age: 20 },
//   ]],
//   [21, [
//     { name: 'Saransh', age: 21 }
//   ]
// ])

And that’s it!

Expose: The TypeScript definitions for these methods appreciate no longer been written yet. Voice this enlighten for additional updates on it.

That is as straightforward as it will get through implementation and this may per chance per chance tranquil land in ES2022 quickly and with a puny of luck, the TypeScript definitions are achieved quickly too.