How to groupby using reduce in JavaScript

The groupBy method is one of the reasons people use lodash in their project. In this blog post, we will write our own version of groupBy using reduce and vanilla JavaScript.

What groupBy does?

groupBy works on an array of items, and it groups these items together into an object based on some criterion. Let us assume we have the following blog posts:

- Advertisement -
let posts = [
  {
    author: 'saransh',
    title: 'Learning context API and the useContext React hook',
  },
  {
    author: 'pranshu',
    title: 'Machine Learning Misconceptions That Software Developers Have',
  },
  {
    author: 'saransh',
    title: 'Understanding the useReducer hook in React',
  },
];

We want our groupBy function to return an object which has all posts written by me (Saransh) and other authors too. That is we want to group posts by author names. Thus:

groupBy(posts, 'author');

will give us the output:

{
  "saransh": [
    {
      "author": "saransh",
      "title": "Learning context API and the useContext React hook"
    },
    {
      "author": "saransh",
      "title": "Understanding the useReducer hook in React"
    }
  ],
  "pranshu": [
    {
      "author": "pranshu",
      "title": "Machine Learning Misconceptions That Software Developers Have"
    }
  ]
}

Now that we understand what groupBy does, let us get to implementing it.

A vanilla JS implementation of groupBy

We will be making use of the array.reduce method for our implementation. The reduce method takes in an array and returns a single value, which is what we want for our groupBy method.

Here is what we already know: We will be taking an input array and a key as an input and returning an object as the output. And we will be using the reduce function to iterate over the input array. Since the output will be an object, we will start with an empty object as our accumulator and then keep adding properties to it as we iterate over the input array. Thus, a skeleton of all this would look like:

const groupBy = (input, key) => {
  return input.reduce((acc, currentValue) => {
    // TODO: implement method
 }, {}); // empty object is the initial value for result object
};

Now, we need to initialize an empty array for each distinct key value if it does not exist. We can do this in two ways:

let groupKey = currentValue[key];
if(!acc[groupKey]) {
  acc[groupKey] = [];
}

And then we need to add the current value to this array and move on to the next iteration of the reduce by returning the object that we just created.

Thus, our groupBy function is completed and we get our final definition as:

const groupBy = (input, key) => {
  return input.reduce((acc, currentValue) => {
    let groupKey = currentValue[key];
    if (!acc[groupKey]) {
      acc[groupKey] = [];
    }
    acc[groupKey].push(currentValue);
    return acc;
  }, {});
};

And that is all we need to do to implement our own groupBy function. We hope this post helped you learn a bit more about how to use reduce and also create your own groupBy function so that you don’t need to rely on Lodash anymore.

Recent Articles

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.