Ways to group data of an array.

Let's say you have an array of colors and you aim to categorize the colors into tow groups of dark colors and light colors.
how would you do this in JavaScript?
well...there are different ways to group the data and in this article we'll go through some of them(trust me, the best ones😉).

Today, we will cover three ways of grouping the data:

1. using Map()
2. using array.reduce()
3. using array.groupBy() and array.groupByToMap()

so... let's get started

1. using Map():

Honestly, Map() is my favorite One.

it's simple and we can get the values easily using the get() method and set them using set() method. it's more performant and compatible.
anyways... this is how you can group the colors using Map() method:

const colors= [
    {
        name: "orange",
        type: 'light',
    },
     {
        name: "black",
        type: 'dark,
    },
     {
        name: "red",
         type: 'light',
    },
     {
        name: "blue",
       type: 'dark,
    },
     {
        name: "brown",
        type: 'dark,
    },
     {
        name: "yellow",
        type: 'light',
    },
]
const colorsMap = new Map()
colors.forEach(color =>colorsMap.set(color.type, color))

2. using array.reduce() :

Last but not least we can take advantage of array.reduce()

const groupByDarkness = colors.reduce((group, color) => {
  const { type } = color;
  group[type] = group[key ] ?? [];
  group[type].push(color);
  return group;
}, {});

3. using array.groupBy() and array.groupByToMap():

this method has just introduced by ES.
Moreover, since the group and groupToMap array methods are still in the proposal stage, we can’t use them in our JavaScript projects. However, if we use polyfill, browsers will understand what those methods do and run them for us without throwing an error whenever we use them.

Simply put, a polyfill is a code that implements a feature on web browsers that do not natively support the feature. The core-js is a robust polyfill that we can use to make the group and groupToMap available in the browser.

To get started with core-js, we can run the following code in our project to install the library:

npm install --save core-js@3.26.1

Here's how to use array.groupBy() to create a color group:

const groupByDarkness = colors.groupBy(color => {
  return color.type 
});

this returns an object where properties are light/dark and values are arrays of colors.

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 array.groupByToMap().

array.groupByToMap(callback) works the same way as array.groupBy(callback), only that it groups items into a Map instead of a plain JavaScript object.

const groupByDarkness = colors.groupByToMap(color => {
  return color.type 
});

using each of the above methods you'll get the following result:

{
    "light": [
        {
            "name": "orange",
             "type": "light"
        },
        {
            "name": "red",
            "type": "light"
        },
        {
            "name": "yellow",
             "type": "light"
        }
    ],
    "dark": [
        {
            "name": "black",
             "type": "dark"
        },
        {
            "name": "blue",
            "type": "dark"
        },
        {
            "name": "brown",
            "type": "dark"
        }
    ]
}