Object.groupBy

I am super happy to see how this feature is already available on some navigators under the experimental flag.

Right now on Chrome if you check the possible keys/functions available of the Object class using:

Object.getOwnPropertyNames(Object)        

The answer will be:

(26) ["length", "name", "prototype", "assign", "getOwnPropertyDescriptor", "getOwnPropertyDescriptors", "getOwnPropertyNames", "getOwnPropertySymbols", "hasOwn", "is", …]
0: "length"
1: "name"
2: "prototype"
3: "assign"
4: "getOwnPropertyDescriptor"
5: "getOwnPropertyDescriptors"
6: "getOwnPropertyNames"
7: "getOwnPropertySymbols"
8: "hasOwn"
9: "is"
10: "preventExtensions"
11: "seal"
12: "create"
13: "defineProperties"
14: "defineProperty"
15: "freeze"
16: "getPrototypeOf"
17: "setPrototypeOf"
18: "isExtensible"
19: "isFrozen"
20: "isSealed"
21: "keys"
22: "entries"
23: "fromEntries"
24: "values"
25: "groupBy"        

And as you can see here the last key it's already groupBy, but how it works what we can do with it? In this article I will explain how to use it and what navigator already have it.

First let's start with a super easy example, let's say we have this array of objects:

const myObjects = [
  {
    name: "Alice",
    age: 25,
    city: "London",
  },
  {
    name: "Bob",
    age: 35,
    city: "New York",
  },
  {
    name: "Carol",
    age: 35,
    city: "Paris",
  },
];
        

And we want to generate an object where the keys are the ages and the values is an array of this object. To do that with the new groupBy functionality we only need to do this:

const groupedByAge = Object.groupBy(myObjects, ({age}) => age );        

And the result of groupedByAge will be:

{
  25: [
    {
      name: "Alice",
      age: 25,
      city: "London",
    }
  ],
  35: [
    {
      name: "Bob",
      age: 35,
      city: "New York",
    },
    {
      name: "Carol",
      age: 35,
      city: "Paris",
    }
  ]
}        

As you can see the groupBy function takes to parameter the first one is an array of objects and the second is a function that allows you to group the results. But can we make this more complex? Can we use this function to create groups a little bit more interesting? Here I show you another example but this case using a little bit more the power that this function give to us.

Imagine that we have the same list of object but know we want to groupBy continent. With this feature it's just this:

function getContinent(city){
  if(city === "New York") return "NA";
  return "EU";
} 

const groupedByContinent = Object.groupBy(myObjects, ({city}) => getContinent(city));        

And the result it's exactly what we wanted:

{
  EU: [
    {
      name: "Alice",
      age: 25,
      city: "London",
    },
    {
      name: "Carol",
      age: 35,
      city: "Paris",
    }
  ],
  NA: [
    {
      name: "Bob",
      age: 35,
      city: "New York",
    },
  ]
}        

As you can see this allow us to easily group array of object using this callback function that we can make as complex as we want.

And at this point maybe you are thinking then where I can use it?

More info:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy#browser_compatibility
• https://tc39.es/proposal-array-grouping/