Understanding Object.groupBy() and Map.groupBy() in Chrome 117

Master JavaScript Grouping in Chrome 117: Full Guide + Examples

JavaScript continues to evolve, and in Chrome 117, two new and powerful features were added: Object.groupBy() and Map.groupBy(). These functions make it super easy to group items in an array — something every developer does all the time.

In this blog post, we’ll break them down with examples and a visual that even a beginner can follow.

🌍 What is Grouping?

Imagine you have a list of students, and you want to group them by age. Before this feature, you had to write some manual code using forEach() or reduce(). Now, it’s as simple as calling a function.

Object.groupBy() – The Friendly Grouping Tool

Example:

const students = [
  { name: "Alice", age: 21 },
  { name: "Bob", age: 25 },
  { name: "Carol", age: 21 },
]; 

const grouped = Object.groupBy(students, student => student.age);
console.log(grouped);

Output:

{
  "21": [
    { name: "Alice", age: 21 },
    { name: "Carol", age: 21 }
  ],
  "25": [
    { name: "Bob", age: 25 }
  ]
}