Mastering Array Grouping with Object.groupBy

If you've worked with arrays in JavaScript, you've likely written code to group items by some property. Until now, this has typically involved using reduce with a fair amount of boilerplate. The new Object.groupBy and Map.groupBy methods simplify this common operation significantly.

Understanding the Problem

Consider a typical scenario where you need to group transactions by date:

const transactions = [
  { date: '2025-06-27', amount: 50, id: 1 },
  { date: '2025-06-27', amount: 30, id: 2 },
  { date: '2025-06-28', amount: 45, id: 3 },
]

// Traditional approach using reduce
const groupedByDate = transactions.reduce((acc, transaction) => {
  if (!acc[transaction.date]) {
    acc[transaction.date] = []
  }
  acc[transaction.date].push(transaction)
  return acc
}, {})

This works, but it's verbose and requires careful attention to avoid mistakes. Let's look at how the new methods improve this.

Using Object.groupBy

Here's the same operation using Object.groupBy:

const groupedByDate = Object.groupBy(
  transactions,
  (transaction) => transaction.date,
)

The result is identical, but the code is more readable and less prone to errors:

{
  '2025-06-27': [
    { date: '2025-06-27', amount: 50, id: 1 },
    { date: '2025-06-27', amount: 30, id: 2 }
  ],
  '2025-06-28': [
    { date: '2025-06-28', amount: 45, id: 3 }
  ]
}

Map.groupBy: When You Need More Flexibility

While Object.groupBy works well for string keys, Map.groupBy offers additional capabilities:

// Group transactions by amount range
const groupedByAmountRange = Map.groupBy(transactions, (transaction) => {
  return transaction.amount < 40 ? 'small' : 'large'
})

The advantage of using Map is that your keys aren't limited to strings - they can be objects, numbers, or any other valid JavaScript value.

Practical Applications

Let's explore some common use cases where these methods prove particularly useful.

Managing Chat Messages

const messages = [
  { text: 'Morning meeting notes', timestamp: '2025-06-28', user: 'Alice' },
  { text: 'Project update', timestamp: '2025-06-28', user: 'Bob' },
  { text: 'Weekly report', timestamp: '2025-06-27', user: 'Alice' },
]

const messagesByDate = Object.groupBy(messages, (msg) => msg.timestamp)

Task Organization

const tasks = [
  { id: 1, status: 'TODO', title: 'Update documentation' },
  { id: 2, status: 'IN_PROGRESS', title: 'Fix performance issue' },
  { id: 3, status: 'TODO', title: 'Write tests' },
]

const tasksByStatus = Object.groupBy(tasks, (task) => task.status)

Implementation Considerations

When using these methods, keep these points in mind:

1. Key Selection: Choose grouping keys that create meaningful, balanced groups. Avoid keys that would create too many or too few groups.

2. Immutability: These methods create new objects/maps without modifying the original data, which helps maintain clean data flow.

3. Performance: The native implementations are optimized and generally faster than equivalent reduce-based solutions in most modern engines.

Browser Support

Standardised in ECMAScript 2024 (the spec text now lives in the ES-2026 draft, § 24.1.4 / § 24.2.4). They ship in Chrome 117+, Firefox 119+, Safari 17.4+ and Node 20.12+. For older environments, here's a minimal polyfill:

if (!Object.groupBy) {
  Object.groupBy = function (array, keyFn) {
    return array.reduce((acc, item) => {
      const key = keyFn(item)
      if (!acc[key]) acc[key] = []
      acc[key].push(item)
      return acc
    }, {})
  }
}

Conclusion

Object.groupBy and Map.groupBy represent a significant improvement in JavaScript's data manipulation capabilities. They transform a common operation that previously required boilerplate code into a clean, straightforward method call.

These methods are particularly valuable when working with data that naturally falls into categories - whether you're organizing tasks, grouping transactions, or managing any other collection of related items. The clarity they bring to your code makes it easier to understand and maintain.