DEV Community

Cover image for #LearnedToday: Object.groupBy()
Daniel Zotti
Daniel Zotti

Posted on

#LearnedToday: Object.groupBy()

🥳 It is finally out! No more need to write ugly code to group an array of objects by a specific value of a field!

Since late 2023, there is an official static method for Object called groupBy() that does it for us!
It accepts an Iterable, such as an Array, and a function, which is executed for each element and must return the "category" of that specific element.
The method returns a new Object where each key is a different category that contains an array of objects belonging to that specific category.

NOTE: The elements in the returned object and the original iterable are the same (not deep copies!). Changing the internal structure of the elements will be reflected in both the original iterable and the returned object.

Example

Let's give a practical example to see how easy it is to group all the Ninja Turtles characters by age.

The initial Array

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];
Enter fullscreen mode Exit fullscreen mode

The good OLD way (with reduce)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);
Enter fullscreen mode Exit fullscreen mode

The MODERN way

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);
Enter fullscreen mode Exit fullscreen mode

Tip: use Map.groupBy() if you want to return a Map instead of an Object

The result

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Demo

🧑🏻‍💻 As usual, I created a simple Stackblitz prject to play with the code.

🗄 Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ Browser support: https://caniuse.com/mdn-javascript_builtins_object_groupby

Image of Bright Data

Global Data Access Unlocked – Reach data across borders without restrictions.

Unlock the power of global data collection with our advanced proxy solutions. Ideal for market research and more.

Unlock Data Now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay