How to Group Arrays in JavaScript Without Using reduce()

Front-end developers constantly manipulate arrays — filtering, mapping, sorting, and reducing data. One of the most common yet cumbersome tasks has always been grouping. Traditionally, grouping required writing custom logic with reduce(), which often felt unnecessarily verbose.

But that’s changing. With the release of ES2024, JavaScript introduces two new static methods: **Object.groupBy() and `Map.groupBy()`**. These built-in tools make grouping data simpler, more expressive, and far easier to read — no more boilerplate or external utility libraries required.

What Are Object.groupBy() and Map.groupBy()?

Both methods group array elements based on a key returned by a callback function, but they differ in how they store and handle those groups.

Object.groupBy(array, callback)

Returns a plain JavaScript object.

• Keys are strings derived from your callback’s output.
• Values are arrays of matching elements.

Example:

const languages = ['C++', 'Rust', 'Go', 'C#'];
const grouped = Object.groupBy(languages, language => language[0]);
console.log(grouped);
// {
//   C: ['C++', 'C#'],
//   G: ['Go']  
//   R: ['Rust']
// }

This groups each language by its first letter — concise and instantly readable.

Map.groupBy(array, callback)

Returns a Map, which can use non-string keys and maintains insertion order.

Example:

const items = [4.1, 5.2, 6.4, 7.9];
const grouped = Map.groupBy(items, Math.floor);
console.log(grouped);
// Map(3) {
//   0 => [4.1]
//   1 => [5.2, 5.9],
//   2 => [6.4]
// }

This flexibility makes Map.groupBy() ideal when grouping by numbers, objects, or complex types.

Why groupBy() Is Better Than reduce()

Before ES2024, you had to write something like this:

const grouped = items.reduce((acc, item) => {
  const key = item[0];
  if (!acc[key]) acc[key] = [];
  acc[key].push(item);
  return acc;
}, {});

Now, it’s just:

const grouped = Object.groupBy(items, item => item[0]);

Less code. More clarity. You focus on what you want to do, not how to do it.

This evolution mirrors what happened when JavaScript introduced methods like .findLast() — simplifying common patterns that developers had to manually code before.

When to Use Object.groupBy() vs. Map.groupBy()

Choose Object.groupBy() when:

• You only need string keys
• You want JSON-serializable results
• You’re working with plain objects

Choose Map.groupBy() when:

• You need non-string keys or insertion order
• You want to use .keys(), .values(), or .entries()

Real-World Examples

Grouping Tasks by Status

const tasks = [
  { id: 1, title: 'Fix pipeline', status: 'todo' },
  { id: 2, title: 'Build auth', status: 'in-progress' },
  { id: 3, title: 'Add integration tests', status: 'todo' },
  { id: 4, title: 'Optimise load time', status: 'in-progress' },
];

const grouped = Object.groupBy(tasks, task => task.status);
console.log(grouped);
// {
//   todo: [...],
//   'in-progress': [...],
//   done: [...]
// }

Perfect for dashboards and workflow apps.

Grouping Products by Price Range

const products = [
  { name: 'Free', price: 0},
  { name: 'Basic', price: 10 },
  { name: 'Pro', price: 30 },
];

const grouped = Object.groupBy(products, product => {
  if (product.price === 0) return 'free';
  if (product.price <= 10  ) return 'individal';
  return 'team';
});

Quickly categorizes products for developers.

Common Gotchas

1. Object.groupBy() Always Converts Keys to Strings

const result = Object.groupBy([1, '1'], x => x);
console.log(result); // { '1': [1, '1'] }

Both values are grouped under the same key "1". Use Map.groupBy() for strict type separation.

2. Map.groupBy() Is Not JSON-Serializable

JSON.stringify(Map.groupBy([1, 2, 3], x => x % 2));
// TypeError: Converting circular structure to JSON

Maps work great in runtime, but if you need to send or store results (like in APIs or localStorage), use Object.groupBy().

Browser Support

groupBy() is supported in:

Source: MDN

Need to support older environments? Use this simple polyfill:

function groupByPolyfill(array, callback) {
  return array.reduce((acc, item) => {
    const key = callback(item);
    acc[key] ??= [];
    acc[key].push(item);
    return acc;
  }, {});
}

Final Thoughts

The addition of **Object.groupBy() and `Map.groupBy()`** marks a major quality-of-life improvement for JavaScript developers.

They eliminate boilerplate reduce() code and make array transformations both declarative and readable.

If you’re still writing manual reducers, it’s time to upgrade.

Once you switch to groupBy(), you might never look back.