Group data by keys using JavaScript Array Grouping (Object.groupBy)

Find Items from the end of the JavaScript Array using at, findLast and findLastIndex

Perform Set Operations using JavaScript Set Methods

Make JavaScript computations lazy using Iterator Helpers

Simplify array immutable changes with the new array.with method

Simplify JavaScript code with Logical, Assignment and Optional Operators

Manually settle a promise using Promise.withResolvers

Manage Asynchronous JavaScript code with any, allSettled new Promise Methods

Make JavaScript Numbers more readable using Numeric Separators

Improve Application-wide Error Handling rethrowing JavaScript Error with the Error Cause

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

[Array Grouping](https://github.com/tc39/proposal-array-grouping) is the new feature of JavaScript/ECMAScript, which splits an array (or, generally, an iterable), into smaller sub-arrays. Grouping is different than other JS array methods - it's *not* a part of the array prototype, but a static method.

[00:00] Use the object dot group by static method on the object prototype in JavaScript. So in this example, we're going to work on the people array, which includes a couple of objects. Each of them includes the name attribute, the specialization attribute, and the boolean active attribute. So
[00:19] let's group this array items by, let's say, the specialization key as for now. Note that the group by method doesn't exist on the JavaScript array prototype. It exists just as a static method on JavaScript object. So we need to pass what is the collection that we want to group. So
[00:39] in our case, this is going to basically be the people. And now we're going to pass a key selector. So key selector is basically a callback, that for a given item returns what is the key that we want to generate. This can be any expression that we want to create the key out of. So
[00:59] if we just stick to what is the value of the specialization property, then we can just group all the elements by the specialization property. So let's just make it slightly more idiomatic and destructure the specialization, property from within the object. So we can see that there
[01:19] is a front end group, including Alice and Dan, which are front end developers. Let's say DevOps, which is basically Cecile and the back end folks, which is, Bob and Elia. So here we are using the existing property, the specialization 1, which
[01:39] does exist on each of these objects. But we can also generate a key dynamically. We can use whatever we want within this callback over here. If we have an item, we could, for instance, group them by what is the value of the active property. We can create a dynamic expression using
[01:59] the values that are available within the item variable. So we have the item dot active, and let's just also write it that this is active, and here is the value. So active false is basically, Dan and Bob and the other three ones are going to be
[02:18] active true. What is also important is that the object dot group by method doesn't necessarily have to accept an array, but the items parameter, which we can see over here, could be any iterable. So an array is automatically an iterable in JavaScript, but other collections or
[02:38] our custom iterators can also be iterables. So let's take a look at the people set. So I have modified the array to become just a set over here so that we have exactly the same data, just it is not an array. It is just a set. And both arrays and sets are iterables. So
[02:58] we can check whether something is an iterable by checking whether the symbol dot iterator property is implemented. So iterator is defined, and we can actually call it so that this is the iterator. So every iterable implements the iterator.
[03:19] Object dot group by using the people send variable. And we're going to run the very same selector key, which is going to grab the specialization over here and return it. And we have exactly the same result as we've had with the array. We could also create a manual
[03:39] generator. So if we cannot use an array or a set or a ECMA script map or anything that is a built in iterable, we can also create a generator function, which is going to be the people generator. In our case, it's going to yield the same values that we've had before. So this implements
[03:59] the iteration protocol. Once we know that we do have something that is going to be iterable and generator itself is not yet iterable, but if we call it, then it becomes an iterator and it is iterable. So let's just make sure that object dot group by is going to work with an iterator.
[04:19] And here, we're just going to pass the very same key selector over here. And here we get the very same result as before. So what is important here is that whether it's an array, a set, or map, or even our custom iterators, object dot group by is going to work well.
[04:39] Also, instead of just object dot group by, there is a group by, method which does exactly the same on the map prototype in JavaScript.

Course

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

Group data by keys using JavaScript Array Grouping (Object.groupBy)

Share this video with your friends