DEV Community

Shameel Uddin
Shameel Uddin

Posted on

JavaScript's Grouping Methods: Object.groupBy and Map.groupBy 🀯

JavaScript, the language that powers the dynamic and interactive web, is constantly evolving to make developers' lives easier. This blog is the introduction of two powerful methods for grouping data: Object.groupBy and Map.groupBy. 🀯

These methods promise to simplify grouping operations, eliminating the need for external dependencies and enhancing the overall development experience.

What's the Buzz About?

groupBy methods aim to streamline process of grouping data, offering a native and efficient solution for grouping objects and maps.


Let's start by exploring Object.groupBy. This method is designed to work with arrays of objects, making it a valuable addition for handling complex datasets.

const employees = [
  { name: 'Shameel', department: 'HR' },
  { name: 'Uddin', department: 'Engineering' },
  { name: 'Syed', department: 'HR' },

// Grouping employees by department using Object.groupBy
const groupedByDepartment = Object.groupBy(employees,({department})=>department)
Enter fullscreen mode Exit fullscreen mode

In this example, employees are grouped by their respective departments, resulting in a clear and concise structure.


    "HR": [
            "name": "Shameel",
            "department": "HR"
            "name": "Syed",
            "department": "HR"
    "Engineering": [
            "name": "Uddin",
            "department": "Engineering"
Enter fullscreen mode Exit fullscreen mode


The Map.groupBy method extends the grouping capabilities to Map objects, providing a versatile solution for scenarios where a Map structure is preferred.

const inventory = [
  { name: 'πŸ₯¦ broccoli', type: 'vegetables', quantity: 9 },
  { name: '🍌 bananas', type: 'fruit', quantity: 5 },
  { name: '🐐 goat', type: 'meat', quantity: 23 },
  { name: 'πŸ’ cherries', type: 'fruit', quantity: 12 },
  { name: '🐟 fish', type: 'meat', quantity: 22 },

const restock = { restock: true };
const sufficient = { restock: false };

// Using Map.groupBy to categorize items based on quantity
const result = Map.groupBy(inventory, ({ quantity }) =>
  quantity < 6 ? restock : sufficient

// Displaying items that need restocking
Enter fullscreen mode Exit fullscreen mode

Here, orders are grouped by the product they contain, showcasing the flexibility and expressiveness of the Map.groupBy method.


The beauty of these new methods lies in their simplicity. They abstract away the complexity of manual grouping, providing a clean and expressive syntax. No more lengthy code or external dependencies – just pure JavaScript magic!

Happy coding! πŸŽ‰πŸ’»βœ¨

Follow me for more such content:

Top comments (8)

artydev profile image

Thank you very much

shameel profile image
Shameel Uddin

You are welcome.

tibinthomas profile image
Tibin Thomas

How to use these in TS projects.

arpanginwala profile image
Arpan Ginwala

Is this function supported in ecmascript 15

chukwuma1976 profile image
Chukwuma Anyadike

These look like nice new methods. I should test them out once I’m back from Thanksgiving break.

shameel profile image
Shameel Uddin

yes you should. I also found these out recently =)

seanmclem profile image

Seems like it’s currently stage three, which is far along enough. Only technical Preview and Safari? Which is fine with transpilation.