Array Grouping In JavaScript Using array.groupBy()

Overview

Today’s topic is the new array-group-proposal that introduces new methods array.groupBy() and array.groupByToMap(). Their polyfills are available in core-js libray.

Let’s see how to use these grouping methods.

1. array.groupBy()

You have a list of cars, where each car is an object having 3 properties: company, model and year.

const cars = [{
    company: "audi",
    model: "r8",
    year: "2012"
}, {
    company: "audi",
    model: "rs5",
    year: "2013"
}, {
    company: "ford",
    model: "mustang",
    year: "2012"
}, {
    company: "ford",
    model: "fusion",
    year: "2015"
}, {
    company: "kia",
    model: "optima",
    year: "2012"
}];

Let’s perform a simple manipulation with the list of cars — group the cars by company. As shown below,

const groupByCompany = {
    "audi": [{
        "company": "audi",
        "model": "r8",
        "year": "2012"
    }, {
        "company": "audi",
        "model": "rs5",
        "year": "2013"
    }],
    "ford": [{
        "company": "ford",
        "model": "mustang",
        "year": "2012"
    }, {
        "company": "ford",
        "model": "fusion",
        "year": "2015"
    }],
    "kia": [{
        "company": "kia",
        "model": "optima",
        "year": "2012"
    }]
}

Here we use array.groupBy() to create the same grouping by company:

const groupByCompany = cars.groupBy((car) => {
    return car.company;
});
console.log(groupByCompany);
// {
//   "audi": [
//     { "company": "audi", "model": "r8", "year": "2012" },
//     { "company": "audi", "model": "rs5", "year": "2013" }
//   ],
//   "ford": [
//     { "company": "ford", "model": "mustang", "year": "2012" },
//     { "company": "ford", "model": "fusion", "year": "2015" }
//   ],
//   "kia": [
//     { "company": "kia", "model": "optima", "year": "2012" }
//   ]
// }

Try the demo.

cars.groupBy(car => {...}) returns an object where each property has the key as company name and value as an array with the cars from the corresponding company.

2. array.groupByToMap()

If you want to group data into a Map, you can use the method array.groupByToMap().

array.groupByToMap(callback) works exactly like array.groupBy(callback), only difference is groups items into a Map instead of a plain JavaScript object.

For example, grouping the cars array into a map by company name is performed as follows:

const groupByCompany = cars.groupByToMap((car) => {
    return car.company;
});
console.log(groupByCompany);
// Map([
//   ['audi', [
//     { company: 'audi', model: 'r8', year: "2012" }, 
//     { company: 'audi', model: 'rs5' year: "2013" },
//   ]],
//   ['ford', [
//     { company: 'ford', model: 'mustang', year: "2012" }, 
//     { company: 'ford', model: 'fusion' year: "2015" },
//   ]],
//   ['kia', [
//     { company: 'kia', model: 'optima' year: "2012" },
//   ]
// ])

Try the demo.

Summary

We learned about grouping an array of objects by key using groupBy() and groupByToMap().

array.groupBy() groups the items into a plain JavaScript object, and

array.groupByToMap() groups them into a Map instance.

Thanks for reading!!