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.

Object.groupBy

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)
console.log(groupedByDepartment);
Enter fullscreen mode Exit fullscreen mode

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

Result:

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

Map.groupBy

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
console.log(result.get(restock));
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.

Conclusion

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:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

Top comments (8)

Collapse
 
artydev profile image
artydev

Nice,
Thank you very much

Collapse
 
shameel profile image
Shameel Uddin

You are welcome.

Collapse
 
tibinthomas profile image
Tibin Thomas

How to use these in TS projects.

Collapse
 
anshsudo profile image
ANSH-SUDO

There is an error coming in vs code saying "Map.groupBy is not a function", Please help me resolving it.

Collapse
 
arpanginwala profile image
Arpan Ginwala

Is this function supported in ecmascript 15

Collapse
 
chukwuma1976 profile image
Chukwuma Anyadike

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

Collapse
 
shameel profile image
Shameel Uddin

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

Collapse
 
seanmclem profile image
Seanmclem

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