1. Native Data Grouping

ES2024 introduced Object.groupBy(), a native JavaScript method to group array elements according to category keys returned by a testing callback function.

2. Why It Matters

Previously, grouping array items required writing complex .reduce() accumulators. Object.groupBy() performs categorization natively in 1 clean line.

3. The Pattern

Pass an array and a callback function that returns the group category key string:

const inventory = [
  { name: "Apples", category: "Fruit" },
  { name: "Carrots", category: "Vegetable" },
  { name: "Bananas", category: "Fruit" },
];

// Group items natively by category
const grouped = Object.groupBy(inventory, (item) => item.category);

console.log(grouped.Fruit);
// Output: [{ name: "Apples", category: "Fruit" }, { name: "Bananas", category: "Fruit" }]

console.log(grouped.Vegetable);
// Output: [{ name: "Carrots", category: "Vegetable" }]

4. Categorizing by Computed Logic

You can group by any computed boolean or range condition:

const students = [
  { name: "Alex", score: 85 },
  { name: "Sarah", score: 55 },
  { name: "Maria", score: 92 },
];

const passFailGroups = Object.groupBy(students, (s) => (s.score >= 70 ? "Passed" : "Failed"));
console.log(passFailGroups);
// { Passed: [Alex, Maria], Failed: [Sarah] }

5. Common Mistakes

• Expecting Map Keys: Object.groupBy() coerces all returned keys to Strings. If you need non-string object keys, use Map.groupBy().

6. Try It Yourself

Write it yourself. The tests below run against your code.

function groupInventory(items) {
  return {};
}

7. Next Steps

Use Object.groupBy() to categorize frontend table lists. Next, let's enter Phase 4 and master Asynchronous JavaScript!