Array.groupBy & Object.groupBy

1. Introduction

Grouping lists of items based on a property is a common data processing task. ES2024 introduced two static methods, Object.groupBy() and Map.groupBy(), to group array elements dynamically without needing third-party libraries.

2. Why It Matters

Historically, grouping arrays required writing custom reduce() loops or loading utility libraries like Lodash. The new static grouping methods simplify these operations, providing a clean, standard way to group collections.

3. Real-World Analogy

Think of a Post Office Sorting Table:

• Legacy reduce() method: A worker takes each letter, walks to the sorting rack, checks if a cubby exists for that city, builds the cubby if missing, places the letter inside, and repeats for all letters. This requires writing separate steps for each action.
• Object.groupBy (Automatic Sorting Machine): A machine that reads the city label on each letter and places it directly into the correct box automatically. It separates the sorting rules from the sorting process.

4. Object.groupBy

Object.groupBy() groups elements of an iterable into a plain JavaScript object. The keys of the returned object are the values returned by the callback function, and the values are arrays containing the grouped elements:

5. Map.groupBy

Map.groupBy() groups elements into a standard Map object. This is useful when you want to use objects or other non-string data types as the grouping keys:

6. Practical Example

This script demonstrates grouping numerical scores into grade categories using Object.groupBy:

7. Common Mistakes

• Using Object.groupBy when you need object references as keys: Plain objects only support strings or symbols as keys. If you return an object from the callback function in Object.groupBy(), the object is converted to the string "[object Object]", which can cause keys to overwrite each other. Use Map.groupBy() instead when grouping by object references.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

const categories = {
  active: { id: 1 },
  inactive: { id: 2 }
};
const users = [
  { name: 'Alice', status: categories.active },
  { name: 'Bob', status: categories.inactive }
];
// Objective: group users by category status object reference
const result = Object.groupBy(users, (u) => u.status);
console.log(result); // logs { "[object Object]": [...] }! Why?

const result = Map.groupBy(users, (u) => u.status);
console.log(result.get(categories.active)); // Returns Alice's user object successfully!

11. Interview Questions

12. Production Considerations

• • Browser Support: Object.groupBy and Map.groupBy are ES2024 features. Ensure your target environment supports them, or include a polyfill (like core-js) if building production bundles for older browsers.