Underscore.js _.groupBy Function
Last Updated :
10 Jan, 2024
Underscore.js _.groupBy() function is used to make a collection of the elements in the array passed. It works by matching the value of each element to the other. If they match then they are put in one collection otherwise we will have 2 collections/groups. We can also pass a function based on whose result we will collect the elements. It can group both based on numbers and also by string.Â
Syntax:
_.groupBy( list, iterate, context );
Parameters:
- List: This parameter contains the element list.
- Iterate: This parameter contains the condition which is used to test the elements.
- Context: It is the text which is used to display. It is an optional parameter.
Return values:
It returns the collections as different arrays.Â
Using Math.ceil() in the _.groupBy() function:
The _.groupBy() function takes the elements from the list one by one and passes them to the Math.ceil() function. Then each element’s output of the function will be matched with the output of another element in the Math.ceil() then they are put in 1 group otherwise they will be in 2 separate groups. After all the elements are matched with all the rest elements then the _.groupBy function ends.Â
Example:Â In this example, we are using Math.ceil() in the _.groupBy() function.
html
<html>
<head>
<script type="text/javascript" src=
</script>
</head>
<body>
<script type="text/javascript">
console.log(_.groupBy([2.7, 3.4, 6.6, 1.2, 2.0, 2.4], function (num) {
return Math.ceil(num);
}));
</script>
</body>
</html>
|
Output:Â
Using length() in the _.groupBy() function:
Passing the array elements to the groupBy() function and matching the elements on the basis of their length. If the length of two elements is the same then they will be grouped in 1 group otherwise 2 groups will be formed.Â
Example:Â In this example, we are using length() in the _.groupBy() function.
html
<html>
<head>
<script type="text/javascript" src=
</script>
</head>
<body>
<script type="text/javascript">
console.log(_.groupBy(['HTML', 'CSS3', 'JS', 'PHP'], 'length'));
</script>
</body>
</html>
|
Output:Â
Using a property of the array passed in the _.groupBy() function:
First, declare the array (here array is ‘arr’). Choose one condition on which need to check like here ‘prop3’. Then the elements which have the same value in the ‘prop3’ will be grouped in 1 group. Console.log the final answer.Â
Example:Â In this example, we are using a property of the array passed in the _.groupBy() function.
html
<html>
<head>
<script type="text/javascript" src=
</script>
</head>
<body>
<script type="text/javascript">
let arr = [
{ prop1: "10", prop2: "07", prop3: "Geeks" },
{ prop1: "12", prop2: "86", prop3: "for" },
{ prop1: "11", prop2: "58", prop3: "Geeks" }
];
console.log(_.groupBy(arr, 'prop3'));
</script>
</body>
</html>
|
Output:Â
Passing ‘date’ as property of the array to the _.groupBy() function together:
First, define an array with one property as ‘date’ of the format ‘dd-mm-yy’. Then pass the array and the ‘date’ property to the _.groupBy() function. The elements having the same date will be grouped in 1 group. The group numbering will start from 0.Â
Example:Â In this example, we are passing ‘date’ as property of the array to the _.groupBy() function together.
html
<html>
<head>
<script type="text/javascript" src=
</script>
</head>
<body>
<script type="text/javascript">
let orders = [
{ date: "30-60-90 Day", Name: "Kim", amount: 415 },
{ date: "30-60-90 Day", Name: "Kelly", amount: 175 },
{ date: "30 Day", Name: "Shelly", amount: 400 },
{ date: "30 Day", Name: "Sarvesh", amount: 180 }
];
console.log(_.groupBy(orders, "date"));
</script>
</body>
</html>
|
Output:Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...