groupBy() in JavaScript

In this article, we will explore the functionality of the groupBy method in JavaScript.

groupBy method

This technique is employed for the categorization of elements. It functions as a static method that allows for the grouping of iterable elements. Its purpose is to organize elements into distinct categories within various groups.

Syntax:

Example


Object.groupBy(items, callbackFn);

In the syntax presented above, the function being referred to is groupBy. The parameters involved are "items" and "callbackFn." The "items" parameter represents an iterable structure, such as an array, that is intended to be grouped. Meanwhile, "callbackFn" is the function that is called for each element within the iterable.

The Object.groupBy function yields an object with a null prototype.

The Object.groupBy function invokes the callbackFn for each element found within the iterable.

The callback function, referred to as callbackFn, yields either a string or a symbol. The value that is returned in the form of a string serves as the key for the object generated by Object.groupBy.

We will explore the groupBy function through a series of demonstrations.

Demonstration-1

We will employ the groupBy function to categorize books according to their genre.

Code:

Example


const books = [
  { title: 'The Lion, The Witch and The Wardrobe', genre: 'Fantasy' },
  { title: 'The Alchemist', genre: 'Fiction' },
  { title: 'How Big Things Get Done', genre: 'Non-Fiction' },
  { title: 'Pride and Prejudice', genre: 'Fiction' },
  { title: 'Stardust', genre: 'Fantasy' },
  { title: 'The Three-Body Problem', genre: 'Science Fiction' }
];

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

console.log(group);

Output:

In the results, we can identify four distinct categories labeled as Fantasy, Fiction, Non-Fiction, and Science Fiction.

Example


[Object: null prototype] {
  'Fantasy': [
    { title: 'The Lion, The Witch and The Wardrobe', genre: 'Fantasy' },
    { title: 'Stardust', genre: 'Fantasy' }
  ],
  'Fiction': [
    { title: 'The Alchemist', genre: 'Fiction' },
    { title: 'Pride and Prejudice', genre: 'Fiction' }
  ],
  
  'Non-Fiction': [ 
    { title: 'How Big Things Get Done', genre: 'Non-Fiction' }
 ],
  'Science Fiction': [ 
    { title: 'The Three-Body Problem', genre: 'Science Fiction' } 
]
  
}

Demonstration-2

We will employ the groupBy function to categorize vehicles according to their respective manufacturers.

Code:

Example


const cars = [{
    company: "Ferrari",
    model: "Roma",
    year: "2020"
}, {
    company: "Honda",
    model: "Elevate",
    year: "2023"
}, {
    company: "Skoda",
    model: "Slavia",
    year: "2023"
}, {
    company: "Ferrari",
    model: "812",
    year: "2023"
}, {
    company: "Honda",
    model: "Amaze",
    year: "2022"
}];
const group = Object.groupBy(cars, (car) => car.company);

console.log(group);

Output:

We can observe three categories identified as Ferrari, Skoda, and Honda.

Example


[Object: null prototype] {
   "Ferrari": [
     { company: "Ferrari", model: "Roma", year: 2020 },
     { company: "Ferrari", model: "812", year: 2023 }
   ],
   "Skoda": [
     { company: "Skoda", model: "Slavia", year: 2023 }
   ],
   "Honda": [
     { company: "Honda", model: "Elevate", year: 2023 },
     { company: "Honda", model: "Amaze", year: 2022 }
   ]
}

Demonstration-3

We will employ the groupBy function to categorize users based on the year they subscribed.

Code:

Example


const subcriptions = [
  { userName: 'Kavya', yearSubscription: 2021 },
  { userName: 'Karishma', yearSubscription: 2023 },
  { userName: 'Lavyansh', yearSubscription: 2023 },
  { userName: 'Ansh', yearSubscription: 2021 },
  { userName: 'Chandni', yearSubscription: 2024 },
  { userName: 'Harsh', yearSubscription: 2024 },
];
const subsByYear = Object.groupBy(subscriptions, (user) => user.yearSubscription);
console.log(subsByYear);

Output:

We can observe the three categories identified as 2021, 2023, and 2024.

Example


[Object: null prototype] {
   "2021": [
     { userName: "Kavya", yearSubscription: 2021 },
     { userName: "Ansh", yearSubscription: 2021 }
   ],
   "2023": [
     { userName: "Karishma", yearSubscription: 2023 },
     { userName: "Lavyansh", yearSubscription: 2023 }
   ],
   "2024": [
     { userName: "Chandni", yearSubscription: 2024 },
     { userName: "Harsh", yearSubscription: 2024 }
   ]
}

Demonstration-4

We will employ the groupBy method to categorize numbers into two distinct groups: one for even numbers and the other for odd numbers. To achieve this, we will define a callback function that takes the n value as an argument and subsequently determines if the number is classified as even or odd.

Code:

Example


const numbers = [1, 5, 8, 3, 2, 4];
const group = Object.groupBy(numbers, (n) => (n % 2 == 0 ? 'even' : 'odd'));
console.log(group);

Output:

We can observe the outcome object categorized into two distinct groups labeled as odd and even.

Example


[Object: null prototype] { odd: [ 1, 5, 3 ], even: [ 8, 2, 4 ] }

Browser Compatibility

Following are the browsers that support the groupBy method:

✅ Google Chrome
✅ Microsoft Edge
✅ Safari
✅ Opera
✅ Firefox
✅ Google Chrome Android
✅ Firefox for Android
✅ Safari on iOS
✅ Opera Android

Conclusion:

In this article, we have explored the functionality of groupBy in JavaScript. We have examined Object.groupBy through various demonstrations to enhance our understanding.

groupBy method

Syntax:

Demonstration-1

Demonstration-2

Demonstration-3

Demonstration-4

Browser Compatibility

Conclusion:

Input Required