The groupBy feature is just one of the features why individuals make use of Lodash in their JavaScript code base. Below I wish to offer you a short instance on just how to carry out groupBy in vanilla JavaScript without Lodash by simply making use of JavaScript’s lower technique.
Allow’s claim we have the adhering to variety of things as well as we wish to organize them by home (below shade) to obtain the list below result:
const customers = [
{ name: 'Jim', color: 'blue' },
{ name: 'Sam', color: 'blue' },
{ name: 'Eddie', color: 'green' },
];
const usersByColor =
console log( usersByColor);
We can make use of JavaScript’s lower technique on a range to repeat over every thing:
const usersByColor = customers lower(( acc, worth) =>> {
return acc;
} , {} );
We begin with a vacant item as our collector (below
acc) for this lower’s callback feature For every single version of the feature, we return the altered (below still the same) collector. Allow’s carry out groupBy:const usersByColor = customers lower(( acc, worth) =>> {
if (! acc[value.color]) {
acc[value.color] = [];
}
return acc;
} , {} );
If the collector has actually no variety booted up for the presently iterated worth’s shade, we produce a vacant variety for it designated in the item whereas the shade is the trick. Later, we can think that there is a range for the shade as well as simply press the worth to it:
const usersByColor = customers lower(( acc, worth) =>> {
if (! acc[value.color]) {
acc[value.color] = [];
}
acc[value.color] press( worth);
return acc;
} , {} );
The groupBy in JavaScript is done. Below once again with remarks for both actions:
const usersByColor = customers lower(( acc, worth) =>> {
if (! acc[value.color]) {
acc[value.color] = [];
}
acc[value.color] press( worth);
return acc;
} , {} );
Basically we begin with a vacant item as well as for each iterated worth, we work out whether we require to assign a brand-new variety based upon the home (below shade) in this item. Later, we press the worth to the (brand-new) variety.
