Many developers appreciate Ruby programming language because of the rich standard utility libraries. For example, the array in Ruby has a huge number of methods.
JavaScript also enriches its standard library on strings and arrays step by step. For example, in a previous post, I described the new array.at() method.
Today's hero is the new array group proposal (currently at stage 3) that introduces new methods Object.groupBy() and Map.groupBy(). Their polyfills are available in core-js library.
Let's see how you may benefit from the grouping methods.
1. Object.groupBy()
You have a list of products, where each product is an object having 2 properties: name and category.
const products = [ { name: 'apples', category: 'fruits' }, { name: 'oranges', category: 'fruits' }, { name: 'potatoes', category: 'vegetables' }];
In the example above products is an array of product objects.
Now your task is to group the products by category. The result would look like this:
const groupByCategory = { 'fruits': [ { name: 'apples', category: 'fruits' }, { name: 'oranges', category: 'fruits' }, ], 'vegetables': [ { name: 'potatoes', category: 'vegetables' } ]};
How would you get an array like groupByCategory from products array in JavaScript?
The usual way is by invoking the array.reduce() method with a callback function implementing the grouping logic:
const groupByCategory = products.reduce((group, product) => { const { category } = product; group[category] = group[category] ?? []; group[category].push(product); return group;}, {});console.log(groupByCategory);// {// 'fruits': [// { name: 'apples', category: 'fruits' }, // { name: 'oranges', category: 'fruits' },// ],// 'vegetables': [// { name: 'potatoes', category: 'vegetables' }// ]// }
products.reduce((acc, product) => { ... }) reduces the products array to an object of products grouped by category.
While I do consider array.reduce() method useful and powerful, sometimes its readability is not the best.
Because grouping data is an often occurring task (recall GROUP BY from SQL?) the array group proposal introduces two useful methods: Object.groupBy() and Map.groupBy().
Here's how to use Object.groupBy() to create the same grouping by category:
const groupByCategory = Object.groupBy(products, product => { return product.category;});console.log(groupByCategory); // {// 'fruits': [// { name: 'apples', category: 'fruits' }, // { name: 'oranges', category: 'fruits' },// ],// 'vegetables': [// { name: 'potatoes', category: 'vegetables' }// ]// }
Object.groupBy(products, product => {...}) returns an object where properties are category names and values are arrays of category products.
Grouping using products.groupBy() requires less code and is easier to understand than using product.reduce().
Object.groupBy(array, callback) accepts a callback function that's invoked with 3 arguments: the current array item, the index, and the array itself. The callback should return a string: the group name where you'd like to add the item.
const groupedObject = Object.groupBy(array, (item, index, array) => { // ... return groupNameAsString;});
2. Map.groupBy()
Sometimes you may want to use a Map instead of a plain object. The benefit of Map is that it accepts any data type as a key, but the plain object is limited to strings and symbols only.
So, if you'd like to group data into a Map, you can use the method Map.groupBy().
Map.groupBy(array, callback) works the same way as Object.groupBy(array, callback), only that it groups items into a Map instead of a plain JavaScript object.
For example, grouping the products array into a map by category name is performed as follows:
const groupByCategory = Map.groupBy(products, product => { return product.category;});console.log(groupByCategory); // Map([// ['fruits', [// { name: 'apples', category: 'fruits' }, // { name: 'oranges', category: 'fruits' },// ]],// ['vegetables', [// { name: 'potatoes', category: 'vegetables' }// ]// ])
3. Conclusion
If you want to easily group the items of an array (similarly to GROUP BY in SQL), then welcome the new methods Object.groupBy() and Map.groupBy().
Both functions accept a callback that should return the key of the group where the current items must be inserted.
Object.groupBy() groups the items into a plain JavaScript object, while Map.groupBy() groups them into a Map instance.
If you'd like to use these functions right away, then use the polyfill provided by core-js library.
