groupBy() in JavaScript

We will understand the groupBy() in JavaScript in this article.

groupBy() method

This method is utilized for grouping elements. It is a static method which permits to group of elements that are iterable. It is utilized to put elements in categories in different groups.

Syntax:

In the above-given syntax, groupBy is the function. The items and callbackFn are the arguments. The argument "items" is an iterable element that will be grouped such as an array. The argument "callbackFn" is the function utilized to execute for each element in the iterable.

The value returned by the Object.groupBy() method is a null prototype object.

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

The callbackFn returns a string or symbol. A value returned as the string is utilized as the key for the object returned by Object.groupBy().

We will understand the groupBy() function with the help of demonstrations.

Demonstration-1

We will utilize the groupBy() method to group books on the basis of genre.

Code:

Output:

We can witness four groups in the output with the names Fantasy, Fiction, Non-Fiction and Science Fiction.

[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 utilize the groupBy() method to group cars by its company.

Code:

Output:

We can witness three groups with the names Ferrari, Skoda and Honda.

[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 utilize the groupBy() method to group users by their year of subscription.

Code:

Output:

We can witness the three groups namely 2021, 2023 and 2024.

[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 utilize the groupBy() method to group numbers into an even group and an odd group. We will create a callback function for the n value and then check whether the number is even or odd.

Code:

Output:

We can witness the result object with two groups with the names odd and even.

[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:

We have understood the groupBy() in JavaScript in this article. We have understood Object.groupBy() with the help of demonstrations.