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

TypeScript: the difference between interface and type

Once we start exploring TypeScript, we start using interfaces and types without really understanding the differences between them. I am guilty of...

Mutant: An open-source, cross-platform, encrypted programming language

Mutant is an open-source, cross-platform, compiled, garbage collected, encrypted programming language that wants to make secure programming and security research more accessible....

Writing better conditional expressions in JavaScript

Writing conditional expressions is pretty easy to do. But there is room for improvement in the way we have been doing it....

My career decision: choosing passion over money

As you might know, I recently switched jobs. In my long journey of finding a new one, there was a moment where...

Parsing and validating data in Python using Pydantic

Introduction of type hinting opened the gates for a lot of great new features in Python. And data validation and parsing became...

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.