Write JavaScript like a pro. Javascript Icon

Follow the ultimate JavaScript roadmap.

Group Array of Objects with Array.prototype.group

In this post you’re going to learn how to group an array of objects with the upcoming Array.prototype.group method.

I recently had the requirement to group an array of objects by a property, and like any good developer - I wanted to explore the upcoming ECMAScript standards to see if anything new had arrived.

It did…

Array.prototype.group is almost here, now at a Stage 3 in the ECMAScript proposal, and is a superb utility function to easily add a “group by” functionality to your data structures.

Let’s assume the following basic data structure, and take note of the type property:

const data = [
  { type: 'food', name: 'Pizza' },
  { type: 'drink', name: 'Coffee' },
  { type: 'food', name: 'Hot Dog' }
];

We have two values, 'food' and 'drink'. Ideally, we would render them individually, passing to perhaps a separate render function or component.

This would be what we want to create:

const result = {
  food: [
    { type: 'food', name: 'Pizza' },
    { type: 'food', name: 'Hot Dog' }
  ],
  drink: [
    { type: 'drink', name: 'Coffee' }
  ]
}

So, how could we do it? With the addition of the Array.prototype.group method, it becomes a simple one-liner:

const data = [
  { type: 'food', name: 'Pizza' },
  { type: 'drink', name: 'Coffee' },
  { type: 'food', name: 'Hot Dog' }
];
const result = data.group((item) => item.type);

// ✅ { food: [ { type: 'food', name: 'Pizza' }, { type: 'food', name: 'Hot Dog' } ], drink: [ { type: 'drink', name: 'Coffee' } ] }
console.log(result);

When combined with some object destructuring, things become even more streamlined and elegant:

const data = [
  { type: 'food', name: 'Pizza' },
  { type: 'drink', name: 'Coffee' },
  { type: 'food', name: 'Hot Dog' }
];
const { food, drink } = data.group((item) => item.type);

// ✅ [{ type: 'food', name: 'Pizza' }, { type: 'food', name: 'Hot Dog' }]
console.log(food);
// ✅ [{ type: 'drink', name: 'Coffee' }]
console.log(drink); 

Want to go further? Check out my follow-up article on creating your own group by function with reduce! It includes an in-depth ‘build your own’ function that will help you learn what’s happening behind the scenes.

🏆 P.S. check out my latest JavaScript courses if you’re serious about taking your skills to the top.

Thanks for reading, happy grouping!

Learn JavaScript the right way.

The most complete guide to learning JavaScript ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover