Grouping Data with Object.groupby() (ES2024)

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

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. Next Steps

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