Grouping with Array.prototype.groupBy

Ever since I started programming, I’ve always found myself in situations where I needed to use a simple function that, at the same time, didn’t exist in the languages I was working with.¹

It was no different when I had to work with JavaScript and needed to do a simple grouping action, meaning I had to split my object or array into small groups according to the type of item I had in them.

Luckily, one of the lifesavers for every dev who needs very common functions is to reach for utility libraries, the most famous one today being LoDash, which coincidentally has a method called groupBy.

But the era of downloading external libraries for these simple functions is coming to an end, because now we can have our own groupBy, except native.

Grouping#

Grouping functions fall into a class of functions I like to call amazing and lazy, because they’re extremely useful for pretty much every kind of thing we can do in development, while also being fast and simple to implement, but they’re so simple that, at the same time, it’s not worth writing something from scratch.

That’s why a lot of people resort to downloading an external library like LoDash so they can have the problem solved in a simple, practical way.

I was never a big fan of having to download a library and create a dependency on external code for such a simple function, especially if I’m only going to use it once in my code. So I prefer to write these functions by hand.

There are infinite ways to do simple grouping, and by simple grouping I mean being able to take a series of items inside an array and organize them into categories, for example, splitting users in a system by their access level:

1
const usuarios = [
2
    { name: 'Lucas', role: 'admin' },
3
    { name: 'Ana', role: 'reader' },
4
    { name: 'Erick', role: 'reader' },
5
    { name: 'Beatriz', role: 'writer' },
6
    { name: 'Carla', role: 'admin' }
7
]

The output I want is something like this:

1
const groups = {
2
    admin: [
3
        {name: 'Lucas', role: 'admin'},
4
        {name: 'Carla', role: 'admin'}
5
    ],
6
    reader: [
7
        { name: 'Ana', role: 'reader' },
8
        { name: 'Erick', role: 'reader' },
9
    ],
10
    writer: [
11
        { name: 'Beatriz', role: 'writer' }
12
    ]
13
}

So how do we write a function like that? The simplest way I can think of is with a reduce:

1
function groupBy (array, key) {
2
  return array.reduce((acc, item) => {
3
      if (!acc[item[key]]) acc[item[key]] = []
4
        acc[item[key]].push(item)
5
        return acc
6
    }, {})
7
}

There’s another way to group if we simplify the reduce a bit more to use the spread operator:

1
function groupBy (array, key) {
2
  return array.reduce((acc, item) => ({
3
      ...acc,
4
      [item[key]]: [...(acc[item[key]] ?? []), item],
5
    }),
6
  {})
7
}

But there are some articles arguing that using spread for this case might be a bad idea, since we end up with a “hidden” loop that can make our function a function of exponential complexity.

Then we have lodash.groupBy, which is almost the same implementation, but with some types for compatibility and stricter error handling. A function that, along with others like intersect and difference, is amazing and lazy.

The native solution#

Recently the TC39 committee, the organization that maintains and steers JavaScript, announced that one of its proposals, the one that will add the new groupBy method to Array.prototype, has already reached stage 3!²

That means that soon we’ll be able to see an implementation exactly like this one in system code all over the world:

1
const usuarios = [
2
    { name: 'Lucas', role: 'admin' },
3
    { name: 'Ana', role: 'reader' },
4
    { name: 'Erick', role: 'reader' },
5
    { name: 'Beatriz', role: 'writer' },
6
    { name: 'Carla', role: 'admin' }
7
]
8

9
const grouped = usuarios.groupBy(({role}) => role)

The idea is that this feature ships as part of ES2022 during this year and becomes a built-in part of browsers some time after that.

But if you’re like me and want to try this feature out as soon as possible, then you need an implementation shim or else wait to use babel with the stage-3 preset so you can code the same way you already do today!