JavaScript Object.groupBy() Method

Summary: in this tutorial, you will learn how to use the JavaScript groupBy() method to group elements of an iterable based on values returned by a specified callback function.

Introduction to JavaScript groupBy() function

The Object.groupBy() is a static method that allows you to group elements of an iterable based on the values returned by a specified callback function.

The Object.groupBy() can be useful when you want to categorize elements into distinct groups.

Here’s the syntax of the groupBy() method:

Object.groupBy(items, callbackFn);Code language: JavaScript (javascript)

In this syntax:

• items: An iterable (e.g., an array) whose elements you want to group.
• callbackFn: A function to execute for each element in the iterable. It should return a value that can be coerced into a property key (string or symbol) indicating the group of the current element.

The Object.groupBy() method returns a null-prototype object with properties for all groups, each assigned to an array containing the elements of the associated group.

The Object.groupBy() method calls the callbackFn function for each element in the iterable.

The callbackFn function should return a string or symbol, which is used as the key for the group to which the current element belongs.

The values returned by callbackFn serve as keys for the object returned by Object.groupBy(), and each key has an associated array containing all the elements that share the same group.

JavaScript groupBy() function

Let’s explore some examples of using the Object.groupBy() function.

1) Using the Object.groupBy() method to group books by genre

The following example uses the groupBy() method to group book objects by genre:

const books = [
  { title: 'The Catcher in the Rye', genre: 'Fiction' },
  { title: 'Sapiens', genre: 'Non-Fiction' },
  { title: 'Dune', genre: 'Science Fiction' },
  { title: 'To Kill a Mockingbird', genre: 'Fiction' },
];

const group = Object.groupBy(books, (book) => book.genre);

console.log(group);Code language: JavaScript (javascript)

Output:

[Object: null prototype] {
  Fiction: [
    { title: 'The Catcher in the Rye', genre: 'Fiction' },
    { title: 'To Kill a Mockingbird', genre: 'Fiction' }
  ],
  'Non-Fiction': [ { title: 'Sapiens', genre: 'Non-Fiction' } ],
  'Science Fiction': [ { title: 'Dune', genre: 'Science Fiction' } ]
}Code language: JavaScript (javascript)

In this example, we use the genre property of the book objects for grouping in the callback function. The result object has three groups: Fiction, Non-Fiction, and Science Fiction.

To make the code more concise, you can use the object destructuring like this:

const group = Object.groupBy(books, ({genre}) => genre);Code language: JavaScript (javascript)

The {genre} extracts the genre property from the book object and the callback function returns it as the key of the group.

2) Using the Object.groupBy() method to group numbers

The following example uses the groupBy() method to categorize numbers into odd and even groups:

const numbers = [1, 2, 6, 5, 4, 9];
const group = Object.groupBy(numbers, (n) => (n % 2 == 0 ? 'even' : 'odd'));
console.log(group);Code language: JavaScript (javascript)

Output:

[Object: null prototype] { odd: [ 1, 5, 9 ], even: [ 2, 6, 4 ] }Code language: JavaScript (javascript)

In this example, we define a callback that takes each number n and checks if it’s even (n % 2 == 0).

If it’s even, the callback returns the string 'even'; otherwise, it returns 'odd'. The groupBy() method uses the string as the key for grouping.

Summary

• Use the JavaScript Object.groupBy() is a powerful method for grouping elements based on specific criteria returned by a specified callback.