The JavaScript specification continues to grow and advance to meet the needs of developers who use the language. ECMAScript is the standard that defines the different APIs that can be used when coding with JavaScript.
There have been several different ECMAScript versions over the years starting with version 1 in 1997 up to the most recent version 12 in 2021. Each version aims to add more API’s, improve on existing API’s and ensure that the language remains relevant.
The process of adding a new API to the language involves a proposal and multiple approval stages from Stage 0, where the proposal is planned to be presented to the EMCA committee by a TC39 champion, or presented to the committee and not rejected definitively to Stage 4 where the proposal will be included in the next ECMAScript release.
In June 2021 Justin Ridgewell raised a proposal for adding groupBy to the Array API. Grouping data is very common, but currently unavailable in the standard JavaScript Array API, and previously, developers had to build their own solution or use a third-party library.
However, this proposal is currently in Stage 3, which means it’s considered complete and no further work is possible without implementation experience, significant usage, and external feedback.
This means it should make it into the standard soon. So, let’s take a look at the proposal, alternatives to the proposal, and how we could build our own implementation, including:
Grouping data with groupBy
Before we can start using groupBy, we need some data to group. Most of the time when you want to group data, you want to take one or more attributes of that data and organize it by that attribute. For our example, let’s take an array of dogs:
const DOGS = [
{
name: 'Groucho Barks',
breed: 'German Shepherd',
age: 1
},
{
name: 'Pepper',
breed: 'Shih Tzu',
age: 3
},
{
name: 'Bark Twain',
breed: 'Dachshund',
age: 5
},
{
name: 'Jimmy Chew',
breed: 'Shih Tzu',
age: 10
},
{
name: 'Pup Tar',
breed: 'Dachshund',
age: 2
},
]
Our array of dogs is made up of an object for each dog, and each dog has a name, breed, and age. The breed is the most common attribute, so we will use this to group the data. You can also use age to get dogs of the same age.
You can also use the name, however in most cases, the names would not match and not group anything.
So, let’s see how we can group the data using the proposal:
const byBreed = dogs.groupBy(dog => {
return dog.breed;
});
We can use the new groupBy function by calling it on the array instance, just like using a map, filter, or reduce function. groupBy takes a callback function which is called for each element in the array in ascending order.
The groupBy function then returns a new object where each key is the different breeds and the value is an array of all the matching dogs. If we were to log the byBreed variable, it would look like the code below:
{
"German Shepherd": [
{
"name": "Groucho Barks",
"breed": "German Shepherd",
"age": 1
}
],
"Shih Tzu": [
{
"name": "Pepper",
"breed": "Shih Tzu",
"age": 3
},
{
"name": "Jimmy Chew",
"breed": "Shih Tzu",
"age": 10
}
],
"Dachshund": [
{
"name": "Bark Twain",
"breed": "Dachshund",
"age": 5
},
{
"name": "Pup Tar",
"breed": "Dachshund",
"age": 2
}
]
}
As the groupBy array API is still in Stage 3, you cannot use it without a polyfill such as the core-js polyfill. But, if you don’t want to wait or want to use a polyfill, what are your other options?
Alternatives to groupBy
Using Lodash
Lodash is the most well-known utility library for JavaScript, and was created to tackle many of the missing API’s that did not exist in older versions of JavaScript.
While many of the API’s now exist, people still use lodash when building applications. Lodash has a groupBy function that can be passed as an array and a callback function. We can see below how we can achieve our dog’s grouping example using Lodash:
import groupBy from 'lodash.groupby';
const byBreed = groupBy(dogs, dog => {
return dog.breed;
});
This generates the same result as the groupBy proposal, but the main difference with using the Lodash version is the need to import the Lodash package and calling the function passing in the array instead of calling the function on the array.
Using Ramda
Ramda is another Javascript utility library, and its main difference from Lodash is its functional focus. Ramda is functional programming as a first-class citizen library, and you can easily curry the utility functions.
In the below example, it’s hard to see any difference between it and using Lodash:
import R from 'ramda';
const byBreed = R.groupBy(function(dog) {
return dog.breed
});
byBreed(DOGS);
In this example, we create a byBreed function, which we can later call with the list of dogs. We can also pass in the dogs when we call Ramda’s groupBy:
R.groupBy(dog => dog.breed, DOGS);
This archives the same result, but if we use Ramda’s functional nature, we can combine multiple functions:
const byBreed = R.groupBy(function(dog) {
return dog.breed
});
const reverseName = R.map(function(dog) {
return {
...dog,
name: dog.name.split('').reverse().join('')
}
})
const processDogs = R.compose(byBreed, reverseName)
processDogs(DOGS);
In this example, we can reverse each of the dogs’ names then group them and make this into a reusable function.
Create your own groupBy
Adding an external library like Lodash or Ramda can have pros and cons. The pros include the additional utilities that the libraries provide. However, the cons include additional bundle size for the end-user and the overhead of managing the third-party dependencies.
As the groupBy function is not currently in the core language, you can create your own groupBy function you can use until the official version releases. Let’s look at how we could create our version:
const groupBy = (list, key) => {
return list.reduce((prev, curr) => {
return {
...prev,
[curr[key]]: [
...(prev[key] || []),
curr,
]
}
}, {})
}
groupBy(DOGS, 'breed')
In the above example, we create a new function that takes in a list and a key. This key is what we will group on. We then use the Array.reduce function to do our grouping.
Our reduce turns the array of dogs into an object, and then iterates over each dog and adds them to the object. If the breed (key) does not exist on the object, it will be created. The value of the object key is an array where the breed is added.
Conclusion
groupBy is a small addition to the language but by digging into it, we can see how the JavaScript proposal process works, how existing libraries tackled the challenge, and how we can create our own versions of a function.
The post Understanding JavaScript’s <code>Array.GroupBy</code> appeared first on LogRocket Blog.
from LogRocket Blog https://ift.tt/r3xEdhI
via Read more
