JavaScript GroupBy Methods
JavaScript GroupBy Methods
Overview
Based on the string value produced by the user-provided callback function, the JavaScript group() method groups the members in the array.
The object returned by the JavaScript group by the function will have the items of the supplied array divided into groups. If the callback function fails to deliver the string value, the JavaScript group function will not operate; for arbitrary values, it is thus preferable to utilize the groupToMap() method.
JavaScript has two useful methods for data grouping: Map.groupBy() and Object.groupBy(). These techniques are useful for data modification and analysis because they offer a clear and effective means of classifying data according to particular criteria.
Object.groupBy()
An iterable's components are grouped by the Object.groupBy() method based on the string values that a callback function is supplied to return. Each group's unique attributes on the final object include arrays of the items that make up that group.
Syntax:
Object.groupBy(items, callbackFn)
Parameters
items
An iterable with grouped components, like an array.
callbackFn
A function that should be run for every item in the list. The value it returns should be able to be forced into a property key (string or symbol) that denotes the group of the element that is now selected. With the following parameters, the function is called:
element
The item that is being handled right now.
index
The element's index that is being processed at that moment.
Example for Object.groupBy()
Code
<!DOCTYPE html>
<html>
<body>
<h1>Example for JavaScript Groupby Objects</h1>
<p id="demo"></p>
<script>
// Creating an Array
const cars = [
{name:"BMW", quantity:3},
{name:"Audi", quantity:5},
{name:"TATA", quantity:2},
{name:"KIA", quantity:4}
];
//using Callback function to select low volumes
function mainCallback({ quantity }) {
return quantity > 2 ? "good" : "ok";
}
// Group by ok and low
const result = Object.groupBy(cars, mainCallback);
// Displaying the Results
let text ="These cars are good: <br>";
for (let [a,b] of result.good.entries()) {
text += b.name + " " + b.quantity + "<br>";
}
text += "<br>These cars are ok: <br>";
for (let [a,b] of result.ok.entries()) {
text += b.name + " " + b.quantity + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output
Map.groupBy()
An iterable's components are grouped by the Map.groupBy() method based on the values given by a callback function that is supplied. Every group is represented by a key in the resultant map, and each key is accompanied by an array that has all the items for which the callback returned the same value.
The technique works best when organizing components that are connected to an item, especially when that object may change over time. An alternative way to describe the object may be to use a string and group the elements using Object.groupBy() if the object is invariant.
Syntax:
Map.groupBy(items, callbackFn)
Parameters
items
An iterable whose components are arranged, like an array.
callbackFn
A function that has to be run for every iterable element. The group of the present element should be indicated by the value (primitive or object) that it returns. The following parameters are supplied when calling the function:
element
the element that is being processed right now.
index
the element's index that is currently being processed.
<!DOCTYPE html>
<html>
<body>
<h1>Example for JavaScript Maps</h1>
<p id="demo"></p>
<script>
// Creating an Array
const cars = [
{name:"KIA", quantity:3},
{name:"BMW", quantity:5},
{name:"AUDI", quantity:2},
{name:"TATA", quantity:4}
];
//using Callback function to select low volumes
function myCallback({ quantity }) {
return quantity > 3 ? "Good" : "Ok";
}
// Group by Good and Ok
const result = Map.groupBy(cars, myCallback);
// Displaying Results
let text ="These cars are Good: <br>";
for (let x of result.get("Good")) {
text += x.name + " " + x.quantity + "<br>";
}
text += "<br>These cars are Ok: <br>";
for (let x of result.get("Ok")) {
text += x.name + " " + x.quantity + "<br>";
}
document.getElementById("demo").innerHTML = text;
console.log(result.get("Good"));
</script>
</body>
</html>
Output
In summary
JavaScript grouping features like Object.groupBy() and Map.groupBy() are useful since they are effective and succinct. It is imperative to take into account any potential disadvantages, though, including memory overhead, performance issues, and relative novelty. Manual grouping or other methods could be better appropriate in cases that are more complicated or where performance is a concern.