Jonas: JavaScript keeps getting new features
about arrays, and so in ES 2024,
a new feature called array grouping
was added to the language.
Now, array grouping is a very powerful feature,
which as the name says,
allows us to group values in an array based on a condition.
So that sounds a bit confusing,
but let's make it simple in this lecture.
Now first, let's once again check out our movements
so we can actually see what we're doing here,
and so now let's actually group
these different movements here
by whether they are a deposit,
so the positive values here, or a withdrawal.
So we're gonna create a variable here called
grouped movements,
and so now let's do the actual array grouping.
Now, first of all, here we actually do not use a method,
but instead we use this.
So we write object dot group by.
So this is very different from what we did earlier
where all these different array features
were actually methods called on an array.
So here, it's very important to keep in mind
that we do array grouping by doing this object dot group by,
and so this now accepts two parameters.
So it receives two arguments
where the first one is the array that we want to group,
so that's the movements array,
and then the second, we need to pass in a callback function,
which will determine
how exactly we want to group the values in the array.
So basically by what we want the elements to be grouped,
and in order to explain this,
it's actually a bit easier to first, write the callback
and then based on the result,
we will see how this actually works.
So basically this is a callback like all the other ones,
so which basically loops over the array,
and so each of them is a movement,
and so then here we can now create, or group basically.
So we say that if the movement
is greater than zero, this should belong to the deposits,
and so here, we return this string
and otherwise, we return the withdrawals string.
So we'll give this a safe, then lock this to the console,
and again, then this callback
will actually make a bit more sense.
So first of all, note
that we actually get here an object as a result,
and so that's why here it is called object dot group by,
and now this object that was created as the keys
actually has exactly these keys that we created here.
So essentially here, we created the names of the groups,
which should be created in the object
and by which,
all the elements in the original array would be grouped.
So again, let's go through the callback here
and keeping in mind
that basically this will loop over the array,
just like a map method or something like this,
and so then here for each of these elements,
it will return one of these two groups.
So if the movement is greater than zero,
the group it should belong to is the deposits group,
and so then this 200 here will exactly be placed
into the deposits group.
The same for the 450, and then the next one is minus 400,
and so then withdrawals, so this string,
which is then the name of the group will be returned,
and so then the 400 will be placed in that group.
So essentially here in this callback function,
we need to return the different group names
that we want our array to be grouped by,
and then each of the elements of the array
will be correctly grouped into one of the categories
according to our code here.
So it could of course be many more groups
than just these two.
For example, by using one or more if statements,
and let's actually do that next here.
So let's go up here and check out our accounts.
So we have this accounts array
where each of them is this object here,
and each of them has a movements array,
which has different length.
For example, this account here
has only done five movements,
while this one here has like eight,
and this one also like eight or something like that,
and so we can classify these different accounts
by the number of movements that they have made.
So let me just demonstrate what I mean by that.
So let's say
grouped
by activity,
and so let's say object
dot group by,
and I think that with this example,
the way we return the different category names that we want
will become a bit more apparent.
So here this time,
we want to group the accounts array that we just saw,
and in that array, each of the elements is an account,
and so here, let's do a couple of operations.
First of all,
let's determine how many movements there actually were.
So let's say movement count.
So that's then account dot movement dot length,
and so remember the idea here
is to classify these different accounts
by the number of movements that they have made,
so let's, let's do that.
So here of course,
we can then come up with some arbitrary numbers.
So let's say if the movement count
is greater or equal eight, then return
very active.
Let's just copy paste this a few times here.
Then let's say if it's greater or equal than four,
then return just active,
and if it's just one,
then moderate
and otherwise.
So basically, if all of these fail,
then it means that there are no activities at all,
and then this, this account is inactive.
So here, it is very clear that these four,
so this one, this one, this one, and this here
are the four possible groups in our final object,
and each of the accounts will be sorted
into one of the groups based on this condition right here,
so on the code that we wrote there,
and so let's then check the results as always,
and here, we get inactive and then all of them are in there.
Well, that cannot be right
and okay, here it is laying like this.
All right, so we have a few that are very active,
all of these here,
and then we have three that are very active.
So these three have eight movements.
This one has only five movements.
So here, we didn't get a huge variation.
Let's just come here.
Maybe I'm gonna delete all of this here.
So this account should now become inactive,
and indeed, there we have it.
So now this one is categorized as inactive,
this Steven one here.
Let's put it back.
Let's maybe put only two, then it should become moderate,
and yeah,
there it is.
So as you see, there will not be a category here,
so there won't be a group
if none of the elements in the array
can be placed in that group.
So right now there's no inactive group,
and after putting this back to the original,
there are only these two, so very active and active,
okay?
So this here was a very explicit example
of how we can manually create these different groups
and assign each of the elements in the array
to one of these groups,
but now taking it to the next level,
this grouping actually makes even more sense
when used with objects
and then grouping simply by one of the object properties.
So that's gonna be one of the main use cases
that you'll probably use this technique with,
so this object dot group by.
So let's then come back to our accounts array
and let's see how we could categorize this here
by one of these properties.
Well right now, none of them makes a lot of sense
because of course, we want to group these accounts
by some property that is common to multiple accounts.
So if we were just to group these accounts
by their interest rate, for example,
we would just get four different groups,
so this doesn't make a lot of sense.
We need something that multiple accounts here
have actually in common,
and so those are then actual groups.
So instead, let's actually create one property here.
So let's say that these different accounts
can have different types.
For example, let's say premium, standard, or basic.
So premium, then let's just copy this here,
and here,
and here.
So let's say this one is basic,
and this one is standard.
All right, so again, let's just pretend
that we're getting all this data here from some web API,
so from some database for example,
and then we want to very easily categorize,
so group these different accounts simply by their type.
So very common to do something like this.
I mean, not necessarily grouping accounts by types,
but simply taking one property of the objects
and then grouping these different array objects
into these different groups based on that.
So this will make more sense
once we actually write the code.
So let's say grouped accounts,
and then once again, object dot group by,
then the accounts again,
and so then the callback function,
and here, each of them is an account
and we want to group by account dot type.
So let's check this.
Grouped by accounts
and beautiful,
there we have our group names,
which in this case, are actually coming directly
from the type property of the objects in the arrays,
and as I mentioned earlier,
this is actually a pretty common use case of array grouping.
So these two are our premiums.
Then we have one standard and one basic,
and here, just to simplify this even further,
which is a syntax that you will see many times,
just copy paste this just so you have both of them,
is to immediately de-structure the type
out of the account here.
So
basically just like this,
and then here we of course need the parenthesis,
otherwise, this destructing doesn't work,
and beautiful.
Here we get the same result,
but with this even nicer syntax here,
where we have to type even less.
Great.
So array grouping really is an amazing new addition
to the JavaScript language,
and the possibilities here are really endless,
as I'm sure you can see just by these three examples,
and I'm sure that you'll actually find many ways
of using this in your own project in the future,
so always keep this array grouping in mind.