Modern JavaScript (ES2024)

Array Grouping

Group arrays by property with Object.groupBy() and Map.groupBy()!

Find videos you like?

Save to resource drawer for future reference!

What is Array Grouping?

Object.groupBy() andMap.groupBy() let you group array elements by any property or condition! No more reduce() gymnastics - just simple, readable grouping!

So Much Cleaner!

Replace complex reduce() logic with a single groupBy() call!

Example 1: Object.groupBy() Basics

Group arrays into objects

javascript

code

DarkEditable

const inventory = [
  { name: 'Asparagus', type: 'vegetables', quantity: 5 },
  { name: 'Bananas', type: 'fruit', quantity: 0 },
  { name: 'Goat', type: 'meat', quantity: 23 },
  { name: 'Cherries', type: 'fruit', quantity: 5 },
  { name: 'Fish', type: 'meat', quantity: 22 }
];

// Old way with reduce - verbose!
const groupedOld = inventory.reduce((acc, item) => {
  const key = item.type;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(item);
  return acc;
}, {});

// New way - Object.groupBy()
const grouped = Object.groupBy(inventory, item => item.type);

console.log(grouped);
// {
//   vegetables: [{ name: 'Asparagus', ... }],
//   fruit: [{ name: 'Bananas', ... }, { name: 'Cherries', ... }],
//   meat: [{ name: 'Goat', ... }, { name: 'Fish', ... }]
// }

// Group by availability
const availability = Object.groupBy(inventory, item => {
  return item.quantity > 0 ? 'inStock' : 'outOfStock';
});

console.log(availability);
// {
//   inStock: [asparagus, goat, cherries, fish],
//   outOfStock: [bananas]
// }

// Group users by age range
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 35 },
  { name: 'Charlie', age: 28 },
  { name: 'Diana', age: 42 }
];

const byAgeGroup = Object.groupBy(users, user => {
  if (user.age < 30) return '20s';
  if (user.age < 40) return '30s';
  return '40s+';
});

console.log(byAgeGroup);
// {
//   '20s': [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 28 }],
//   '30s': [{ name: 'Bob', age: 35 }],
//   '40s+': [{ name: 'Diana', age: 42 }]
// }

Console Output

Click "Run Code" to see output here...

Example 2: Map.groupBy() for Non-String Keys

Use Map.groupBy() when keys aren't strings

javascript

code

DarkEditable

// Map.groupBy() - for non-primitive keys
const products = [
  { id: 1, price: 10.99 },
  { id: 2, price: 25.50 },
  { id: 3, price: 10.99 },
  { id: 4, price: 50.00 },
  { id: 5, price: 25.50 }
];

// Group by price (number keys)
const byPrice = Map.groupBy(products, p => p.price);

console.log(byPrice);
// Map {
//   10.99 => [{ id: 1, price: 10.99 }, { id: 3, price: 10.99 }],
//   25.50 => [{ id: 2, price: 25.50 }, { id: 5, price: 25.50 }],
//   50.00 => [{ id: 4, price: 50.00 }]
// }

// Access grouped data
console.log(byPrice.get(10.99));
// [{ id: 1, price: 10.99 }, { id: 3, price: 10.99 }]

// Real-world: Group events by date object
const events = [
  { name: 'Meeting', date: new Date('2024-01-15') },
  { name: 'Conference', date: new Date('2024-01-15') },
  { name: 'Workshop', date: new Date('2024-01-16') }
];

// Using date strings as keys
const byDate = Object.groupBy(events, event => 
  event.date.toDateString()
);

console.log(byDate);
// {
//   'Mon Jan 15 2024': [meeting, conference],
//   'Tue Jan 16 2024': [workshop]
// }

// Complex grouping with nested properties
const orders = [
  { id: 1, customer: { country: 'USA' }, total: 100 },
  { id: 2, customer: { country: 'UK' }, total: 200 },
  { id: 3, customer: { country: 'USA' }, total: 150 }
];

const byCountry = Object.groupBy(orders, 
  order => order.customer.country
);

console.log(byCountry);
// {
//   USA: [{ id: 1, ... }, { id: 3, ... }],
//   UK: [{ id: 2, ... }]
// }

Console Output

Click "Run Code" to see output here...

Object.groupBy() vs Map.groupBy()

Feature	Object.groupBy()	Map.groupBy()
Return type	Plain object	Map instance
Key types	Strings/Symbols	Any type ✅
Access	`obj.key`	`map.get(key)`
Best for	Simple cases	Complex keys ✅

Key Takeaways

📦

Two Methods

Object.groupBy() and Map.groupBy()

✨

Clean Syntax

No more complex reduce() logic

🗂️

Group by Anything

Any property or custom condition

💡

ES2024

Built-in array grouping

Previous Topic

Symbols as WeakMap Keys

Using symbols in WeakMap for better encapsulation (ES2023).

Next Topic

Promise.withResolvers

Creating promise with exposed resolve/reject (ES2024).

Ask a Question

Have a question about Array Grouping? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Modern JavaScript (ES2024)

Array Grouping

Group arrays by property with Object.groupBy() and Map.groupBy()!

Find videos you like?

Save to resource drawer for future reference!

What is Array Grouping?

Object.groupBy() andMap.groupBy() let you group array elements by any property or condition! No more reduce() gymnastics - just simple, readable grouping!

So Much Cleaner!

Replace complex reduce() logic with a single groupBy() call!

Example 1: Object.groupBy() Basics

Group arrays into objects

javascript

code

DarkEditable

// Old way with reduce - verbose!
const groupedOld = inventory.reduce((acc, item) => {
  const key = item.type;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(item);
  return acc;
}, {});

// New way - Object.groupBy()
const grouped = Object.groupBy(inventory, item => item.type);

// Group by availability
const availability = Object.groupBy(inventory, item => {
  return item.quantity > 0 ? 'inStock' : 'outOfStock';
});

console.log(availability);
// {
//   inStock: [asparagus, goat, cherries, fish],
//   outOfStock: [bananas]
// }

// Group users by age range
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 35 },
  { name: 'Charlie', age: 28 },
  { name: 'Diana', age: 42 }
];

const byAgeGroup = Object.groupBy(users, user => {
  if (user.age < 30) return '20s';
  if (user.age < 40) return '30s';
  return '40s+';
});

console.log(byAgeGroup);
// {
//   '20s': [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 28 }],
//   '30s': [{ name: 'Bob', age: 35 }],
//   '40s+': [{ name: 'Diana', age: 42 }]
// }

Console Output

Click "Run Code" to see output here...

Example 2: Map.groupBy() for Non-String Keys

Use Map.groupBy() when keys aren't strings

javascript

code

DarkEditable

// Map.groupBy() - for non-primitive keys
const products = [
  { id: 1, price: 10.99 },
  { id: 2, price: 25.50 },
  { id: 3, price: 10.99 },
  { id: 4, price: 50.00 },
  { id: 5, price: 25.50 }
];

// Group by price (number keys)
const byPrice = Map.groupBy(products, p => p.price);

// Access grouped data
console.log(byPrice.get(10.99));
// [{ id: 1, price: 10.99 }, { id: 3, price: 10.99 }]

// Using date strings as keys
const byDate = Object.groupBy(events, event => 
  event.date.toDateString()
);

console.log(byDate);
// {
//   'Mon Jan 15 2024': [meeting, conference],
//   'Tue Jan 16 2024': [workshop]
// }

const byCountry = Object.groupBy(orders, 
  order => order.customer.country
);

console.log(byCountry);
// {
//   USA: [{ id: 1, ... }, { id: 3, ... }],
//   UK: [{ id: 2, ... }]
// }

Console Output

Click "Run Code" to see output here...

Object.groupBy() vs Map.groupBy()

Feature	Object.groupBy()	Map.groupBy()
Return type	Plain object	Map instance
Key types	Strings/Symbols	Any type ✅
Access	`obj.key`	`map.get(key)`
Best for	Simple cases	Complex keys ✅

Key Takeaways

📦

Two Methods

Object.groupBy() and Map.groupBy()

✨

Clean Syntax

No more complex reduce() logic

🗂️

Group by Anything

Any property or custom condition

💡

ES2024

Built-in array grouping

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Symbols as WeakMap Keys

Promise.withResolvers

JavaScript Code Editor

Building Your Learning Module...

Array Grouping

What is Array Grouping?

So Much Cleaner!

Example 1: Object.groupBy() Basics

Example 2: Map.groupBy() for Non-String Keys

Key Takeaways

Two Methods

Clean Syntax

Group by Anything

ES2024

Symbols as WeakMap Keys

Promise.withResolvers

JavaScript Code Editor

Array Grouping

What is Array Grouping?

So Much Cleaner!

Example 1: Object.groupBy() Basics

Example 2: Map.groupBy() for Non-String Keys

Key Takeaways

Two Methods

Clean Syntax

Group by Anything

ES2024