Original subtitles

The next two array methods

that we're gonna learn,

are the flat and flat map methods.

And thankfully, these are very easy to understand.

So let's go.

So let's say that we have an array

with some arrays in it.

So essentially a nested array.

So let's say one, two, three,

and then another array here,

four, five, six,

and then even some values like this.

So this is perfectly normal,

but what if we wanted

to take all these elements in the separate

and put all of these together

in just one big array,

which contains all the numbers here

from one to eight?

Well, that's pretty simple,

using the new flat method.

And they say new,

because flat and also flat map

were introduced in ES2019.

So they are pretty recent,

and one more time,

they will therefore not work

in super old browsers. Okay.

And actually that's it,

for the flat method.

So no callback function, adjust like this,

and we get indeed,

or full array from one to eight.

So (indistinct) removed the nested arrays

and flattened the array,

which is why the method is called flat.

So very nice, very simple

and no callback function this time.

Okay. But now let's say

that we have an array,

which is even deeper nested.

So let's call it arrDeep.

And so this one right now has only,

like, one level of nesting,

but let's say that,

these two here, are in their own array still.

And maybe these two here as well.

So now we have an array,

inside an array, inside an array.

So let's see what happens,

when we flat this one,

and we got the same result,

but that's because I made this mistake.

So we need to flatten arrDeep.

And so now you'll see

that we get this result,

which still contains the two inner arrays. All right.

So this means that the flat method,

only goes one level deep,

when flattening the array.

So this three here,

was inside the first level of nesting.

And so therefore it was taken out

and it's now in the main array,

but then we still have this nested array in there.

So we can fortunately fix that,

by using the depth argument.

So right now, basically flat,

is running with the,

one here as the depth.

And so if we run it with one,

which is the default,

then we get this,

but we can go two levels deep.

And so now we get the same result as before.

And that's because it now goes,

even into the second level of nesting

and also takes the element out of depth array. All right.

So that's how flat works,

but this example is not really that useful.

And so let's go back

to the bank accounts.

So let's say that the bank itself,

wants to calculate the overall balance

of all the movements

of all the accounts.

So how would we go about solving this problem?

Well, first of all,

we have all these movements stored in arrays,

and these arrays are inside the objects

in the accounts array.

So in this array that we have been using.

So accounts, so that's the one,

so this is where we have our movements.

And so the first thing to do,

is to take them out of here

and put them all into one array.

So how would we do that?

Well, let's create a variable here called,

account movements, and so we could do,

accounts, accounts like this,

and then what we want to create,

is the new array,

but with the same length,

which only contains these movements array.

So that's what I was just saying.

And so for that,

we can use the map method.

So in each account,

take the account.movements

and so return that value,

into the new array. All right.

And so now we have this array,

which then in turn contains the array

of all the movements.

And so you see,

that now we actually have a nested structure here.

So an array which contains other arrays.

And so probably you can see

where I'm going with this,

because now I want an array,

which simply contains all of these values,

just in one array.

So let's call this one all movements.

And so it's gonna be, accountmovements.flat.

And we have only one level of nesting.

And so there's not even a need

for any parameter here.

So for any argument.

So, now we get this,

nice array of the length 29,

which all of these movements.

And now all we have to do,

is to add them all together,

which is pretty easy at this point.

So let's call this one overall balance,

is equal to allmovements.reduce,

until we got the accumulator

and to current movement.

And we return accumulator plus movement,

and we start with zero.

So I'm doing this all very fast here,

because I already explained all of this,

multiple times at this point.

And so here we get the final result

of adding up all of these values,

that were originally as we started,

in the separate movements arrays

that were in turn,

the inside of the account objects.

And of course we can make this here,

a lot more beautiful.

So instead of doing all of this separately,

as you already know,

we can use chaining.

So we start with this here,

so building a new array,

out of the array of account objects,

then we flat that result.

And then we add it all together.

So like this,

and then we log it all to the console,

and this is then unnecessary.

And actually I will just delete all of it.

Give it a safe,

until we get the exact same result.

Now it turns out that, using a map first

and then flattening the result,

and it's a pretty common operation.

So that's exactly what we have here.

So first we map,

and then we flat that result.

So that's exactly what we have here.

And so to solve this,

there is another method

that was also introduced

at the same time, which is flat map.

And so flat map essentially combines,

a map and a flat method,

into just one method,

which is better for performance.

So let's do this one here again,

but this time with flat map.

So actually we can just copy it

and here I'm gonna call it, just the two.

And so here we will now use flat map instead.

And since flat map also does mapping,

it needs to receive exactly the same callback

as a map method.

So this is essentially a map method

that all it does is, in the end,

it then flattens the result.

And so you see here the result is the same.

Now just notice that, flat map here,

only goes one level deep

and we cannot change it.

So if you do need to go deeper than just one level,

you still need to use the flat method.

So anyway, keep these two in mind.

Whenever you find yourself in a situation

where you have nested the race

and need to work with them.

And believe me,

that happens more often than you think,

and I believe that,

even in the course of this course,

there is gonna be another situation.