JavaScript continuously enriches its standard library on strings and arrays. In today’s post, I will be discussing the new array group proposal which is currently at stage 3. This new proposal introduces new methods array.groupBy() and array.groupByToMap(). You can get their polyfills from the core-js library.
Let’s see examples below to understand how these methods work.
Read this blog post or watch the video below to learn more about the JavaScript array.groupBy() and array.groupByToMap() method.
array.groupBy()
Let’s say you have the below list of countries, where each country is an object with 2 properties name and continent.
const countries = [
{ name: "Canada", continent: "AMER" },
{ name: "United States of America", continent: "AMER" },
{ name: "India", continent: "ASIA" },
{ name: "Switzerland", continent: "EUROPE" },
{ name: "Germany", continent: "EUROPE" }
];The above “countries” is an array of country objects.
Let’s say you want to group the countries by continent and get results like the below –
{
"AMER": [
{
"name": "Canada",
"continent": "AMER"
},
{
"name": "United States of America",
"continent": "AMER"
}
],
"ASIA": [
{
"name": "India",
"continent": "ASIA"
}
],
"EUROPE": [
{
"name": "Switzerland",
"continent": "EUROPE"
},
{
"name": "Germany",
"continent": "EUROPE"
}
]
} You can use the new array.groupBy() to create the above grouping. The code will be much cleaner and readable compared to if you want to do this with reduce() function. Below is the code –
const groupByContinent = countries.groupBy((country) => {
return country.continent;
});
console.log(JSON.stringify(groupByContinent, null, 2));countries.groupBy((country) => {…}) returns the object where each property has the key as continent and value as an array with the products from the corresponding continent.
array.groupBy(callback) accepts a callback function which is invoked with 3 arguments: the current array item, index and the array itself. The callback should return a string that is treated as the group name where items will be added.
const groupedObject = array.groupBy((item, index, array) => {
// ...
return groupNameAsString;
});array.groupByToMap()
You might want to utilize a Map instead of a regular object on occasion. The advantage of Map is that it can use any data type as a key, whereas the plain object can only use strings and symbols.
In this situation, you can use the new method array.groupByToMap() method. This method works exactly the same way as array.groupBy(), the only difference is that it groups items into a Map instead of a plain JavaScript object.
Here is the code using array.groupByToMap() method –
const groupByContinentMap = countries.groupByToMap((country) => {
return country.continent;
});
console.log(groupByContinentMap);Output will be map like shown below –
Conclusion
Welcome the new methods array.groupBy() and array.groupByToMap() if you want to conveniently group the items of an array.
Both functions use a callback parameter that should return the key of the group into which the current items must be added.
array.groupByToMap() groups the items into a Map instance, whereas array.groupBy() groups them into a simple JavaScript object.
I would like to thank you for the efforts youve put in writing this blog. Im hoping to view the same high-grade content by you later on as well. In fact, your creative writing abilities has encouraged me to get my own, personal blog now 😉
Hello there! I simply would like to give you a huge thumbs up for your excellent information youve got here on this post. I will be returning to your site for more soon.
Thank you for sharing such valuable information. It’s incredibly helpful.