JavaScript – Group Objects by Property into Arrays
Last Updated :
13 Jan, 2025
Improve
Here are the various approaches to grouping objects by property into arrays
1. Using a for Loop
The for loop is the most basic and widely used approach.
for (let obj of a ) {
if (!groups[obj.cat]) {
groups[obj.cat] = [];
grouped.push(groups[obj.cat]);
}
groups[obj.cat].push(obj);
}
Output
[
[ { cat: 'fruit', name: 'apple' }, { cat: 'fruit', name: 'banana' } ],
[ { cat: 'veg', name: 'carrot' } ]
]
In this example
- It tracks categories using an object.
- Pushes each object into its respective group.
- Adds groups to the final array.
2. Using reduce()
The reduce() is the functional programming approach to grouping.
const grouped = Object.values(
a.reduce((acc, obj) => {
acc[obj.category] = acc[obj.category] || [];
acc[obj.category].push(obj);
return acc;
}, {})
);
Output
[
[
{ cat: 'fruit', name: 'apple' },
{ cat: 'veg', name: 'carrot' },
{ cat: 'fruit', name: 'banana' }
]
]
- Uses reduce() to group objects by property.
- Populates the accumulator object with categories.
- Extracts grouped arrays using Object.values().
3. Using Map()
The map() is efficient and ideal for large datasets.
const map = new Map();
a.forEach(obj => {
if (!map.has(obj.cat)) map.set(obj.cat, []);
map.get(obj.cat).push(obj);
});
Output
[
[ { cat: 'fruit', name: 'apple' }, { cat: 'fruit', name: 'banana' } ],
[ { cat: 'veg', name: 'carrot' } ]
]
4. Using Object.assign()
The Object.assign() method combines with reduce() to group objects.
const grouped = Object.values(
a.reduce((grp, obj) =>
Object.assign(grp, {
[obj.cat]: [...(grp[obj.cat] || []), obj],
}),
{})
);
Output
[
[ { cat: 'fruit', name: 'apple' }, { cat: 'fruit', name: 'banana' } ],
[ { cat: 'veg', name: 'carrot' } ]
]
- Updates the accumulator with grouped arrays.
- Uses Object.assign() for dynamic property assignment.
5. Using Array.filter()
Array.filter() method groups objects by filtering the array multiple times.
const cats = [...new Set(a.map(obj => obj.cat))];
const grouped = cats.map(cat => a.filter(obj =>
obj.cat === cat));
Output
[
[ { cat: 'fruit', name: 'apple' }, { cat: 'fruit', name: 'banana' } ],
[ { cat: 'veg', name: 'carrot' } ]
]
- Creates unique categories using Set.
- Filters objects for each category.
6. Using Object.fromEntries()
Combine map() with Object.fromEntries() for a modern approach.
const a = [
{ cat: 'fruit', name: 'apple' },
{ cat: 'veg', name: 'carrot' },
{ cat: 'fruit', name: 'banana' }
];
const grouped = Object.values(
a.reduce((grp, obj) => {
if (!grp[obj.cat]) {
grp[obj.cat] = [];
}
grp[obj.cat].push(obj);
return grp;
}, {})
);
console.log(grouped);
Output
[
[ { cat: 'fruit', name: 'apple' }, { cat: 'fruit', name: 'banana' } ],
[ { cat: 'veg', name: 'carrot' } ]
]
- Uses map() and Object.fromEntries() to create an initial structure.
- Populates the structure with objects.
Which Approach Should You Choose?
- for Loop: Best for beginners; simple and easy to understand.
- reduce(): Perfect for functional programmers; clean and expressive.
- Map(): Efficient for handling large datasets.
- Object.assign(): Compact but slightly advanced.
- filter(): Useful for smaller datasets but less efficient.
- Object.fromEntries(): A modern and flexible approach.
