How to group an array of objects by key in JavaScript

Suppose, we have an array of objects containing data about some cars like this:

const arr = [
    {
        'make': 'audi',
        'model': 'r8',
        'year': '2012'
    }, {
        'make': 'audi',
        'model': 'rs5',
        'year': '2013'
    }, {
        'make': 'ford',
        'model': 'mustang',
        'year': '2012'
    }, {
        'make': 'ford',
        'model': 'fusion',
        'year': '2015'
    }, {
        'make': 'kia',
        'model': 'optima',
        'year': '2012'
    }
];

We are required to write a JavaScript function that takes in one such array of objects. The function should then group the objects together based on their 'make' property.

Expected Output

The output should group cars by their make, creating an object where each key is a car make and the value is an array of cars:

{
    'audi': [
        { 'make': 'audi', 'model': 'r8', 'year': '2012' },
        { 'make': 'audi', 'model': 'rs5', 'year': '2013' }
    ],
    'ford': [
        { 'make': 'ford', 'model': 'mustang', 'year': '2012' },
        { 'make': 'ford', 'model': 'fusion', 'year': '2015' }
    ],
    'kia': [
        { 'make': 'kia', 'model': 'optima', 'year': '2012' }
    ]
}

Using reduce() Method

The most efficient approach is using the reduce() method to accumulate objects into groups:

const arr = [
    {
        'make': 'audi',
        'model': 'r8',
        'year': '2012'
    }, {
        'make': 'audi',
        'model': 'rs5',
        'year': '2013'
    }, {
        'make': 'ford',
        'model': 'mustang',
        'year': '2012'
    }, {
        'make': 'ford',
        'model': 'fusion',
        'year': '2015'
    }, {
        'make': 'kia',
        'model': 'optima',
        'year': '2012'
    }
];

const groupByMake = (arr = []) => {
    return arr.reduce((result, car) => {
        // If the make doesn't exist in result, create an empty array
        result[car.make] = result[car.make] || [];
        // Add the current car to the appropriate group
        result[car.make].push(car);
        return result;
    }, {});
};

console.log(groupByMake(arr));

{
    audi: [
        { make: 'audi', model: 'r8', year: '2012' },
        { make: 'audi', model: 'rs5', year: '2013' }
    ],
    ford: [
        { make: 'ford', model: 'mustang', year: '2012' },
        { make: 'ford', model: 'fusion', year: '2015' }
    ],
    kia: [ { make: 'kia', model: 'optima', year: '2012' } ]
}

Generic Grouping Function

You can create a more flexible function that groups by any key:

const groupBy = (arr, key) => {
    return arr.reduce((result, item) => {
        const group = item[key];
        result[group] = result[group] || [];
        result[group].push(item);
        return result;
    }, {});
};

// Group by make
console.log("Grouped by make:");
console.log(groupBy(arr, 'make'));

// Group by year
console.log("\nGrouped by year:");
console.log(groupBy(arr, 'year'));

Grouped by make:
{
    audi: [
        { make: 'audi', model: 'r8', year: '2012' },
        { make: 'audi', model: 'rs5', year: '2013' }
    ],
    ford: [
        { make: 'ford', model: 'mustang', year: '2012' },
        { make: 'ford', model: 'fusion', year: '2015' }
    ],
    kia: [ { make: 'kia', model: 'optima', year: '2012' } ]
}

Grouped by year:
{
    '2012': [
        { make: 'audi', model: 'r8', year: '2012' },
        { make: 'ford', model: 'mustang', year: '2012' },
        { make: 'kia', model: 'optima', year: '2012' }
    ],
    '2013': [ { make: 'audi', model: 'rs5', year: '2013' } ],
    '2015': [ { make: 'ford', model: 'fusion', year: '2015' } ]
}

How It Works

The reduce() method processes each array element and builds up an accumulator object:

1. Start with an empty object {} as the initial accumulator
2. For each car object, check if the make exists as a key in the result
3. If not, create an empty array for that make
4. Push the current car object into the appropriate array
5. Return the updated result object

Conclusion

The reduce() method provides an elegant solution for grouping arrays of objects by any property. This pattern is commonly used in data processing and can be adapted for various grouping scenarios.