Original subtitles

In this video, we're gonna talk about

the third data transformations method,

which is the reduce method.

And as you will remember,

we use the reduce method to essentially boil down

all the elements in an array to one single value.

And we talked about the example of

adding up all the numbers in one array, right?

And so let's try that now with all movements array.

And remember that array looks like this. Okay.

And then by adding up all these numbers,

so both the deposits and the withdrawals,

we end up with the global balance of the account, basically.

So let's start using the reduce method here.

And so, as I just said,

we're gonna call it on the movements array.

And the results of the reduce method will be,

as I just said, the global balance of the account.

So let's call the result, balance.

And remember that in this case,

this balance will be simply one value

and not an entire array.

Okay. So the reduce function also gets a callback function,

but this one is a little bit different from the other ones,

like the one in map or for each.

So in these other callbacks,

the first parameter is always

the current element of the array.

Let's call it current.

The second one is the current index

and the third one is the entire array.

But here in the callback function of the reduce method,

the first parameter is actually

something called the accumulator.

So let's call it acc like this

as an abbreviation of accumulator.

And this accumulator is essentially like a snowball

that keeps accumulating the value

that we ultimately want to return.

So in the case of adding all the elements

or all the numbers of an array together,

that will be the sum.

So let me write that here.

Oops.

So let me write accumulator

it's like a snowball.

All right.

But anyway, let's not write the actual function block here.

So as always, this callback function here

will be called in each iteration

of a looping over the array.

So reduce also loops over the array

and calls this callback in each iteration,

but now what will we actually do

in each of these iterations?

Well, since the accumulator is the value

that we will keep adding to what we're gonna do here

is to add the current value to the accumulator.

So the accumulator plus the current value. Okay.

And this works because in each call of

the callback function,

the accumulator will be the current sum

of all the previous values.

And so we will really keep adding to this accumulator

in each iteration of the loop.

Finally, we also need to return this value here

from the callback.

And so this is how the new accumulator

can then be used in the next iteration of the loop.

So basically in each loop iteration,

we return the updated accumulator

so the current one, plus the new current value.

And so like this, we can then keep adding to it

in the next iteration.

Okay?

So this callback function is the first argument

of the reduce method,

but the reduce method actually has a another,

so a second parameter,

and that is the initial value of the accumulator.

So the value that we specify here,

which in this case is gonna be zero is the initial value

of the accumulator in the first loop iteration.

And so in this example, we want to start counting

or we want to start adding at zero.

And so therefore we simply specify zero here.

Okay, and with this we should be able

to already take a look at our balance.

And yeah, so we have one single number.

So indeed everything was boiled down to this one number,

which we can suppose is all of these values here

added together, all right.

And to make this even more clear to see,

that's actually always log the accumulator to the console.

So let's say iteration number I

and enter the accumulator in there.

Okay, so we see that in iteration zero,

the accumulator is zero.

And so this is the value that we specified here

as the starter so as the initial value.

Then in the second iteration,

the accumulator is already at 200

and that's because that is the initial value

plus the current value in the previous iteration.

So that was 200 there.

And so this zero plus the 200 creates the new accumulator,

which is done in the next iteration, 200.

Then in this iteration, we add the current value again,

which is 450.

So that result is 650.

And therefore in the next iteration,

that's the value of the accumulator.

Okay. And so here you can really see

like the snowball effect of all of these values,

adding up to one final value.

And in the end, that value is essentially the accumulator.

Now here we see the value of going down

because in this iteration,

we are adding minus 400

and so 250 is 650 minus 400.

Okay, so in the last iteration the value is 2,540,

and then adding 1,300 will eventually result

in this value here.

Great. So this is really how the reduce method works.

And I think this a log here

is a great visualization of that.

Let's give it all the space we need.

And let me just change this one here to 100,

so that you see the effect of changing this.

And so now we can expect this accumulator

in the beginning being 100.

And so we already start with a small snowball here,

which then we keep adding to,

and therefore our final balance is now 100 euros

or whatever it is larger.

Okay. And yeah,

let's one more time do the same thing manually,

basically with a four loop.

So of movements.

And so we need one more time, an external variable here,

which is gonna be the sum.

Well, let's call it balance two.

So balance two starts at zero.

And so essentially this is,

or initial accumulator value just like this zero

and then sum plus equal the current movement.

And if we lock balance two, we will get, okay.

Now of course this has to be balance two,

but now we get indeed the same result.

And so here you can see this common pattern

that we always need an external variable

whenever we want to use a for loop.

And that's fine if you only need one loop,

but it starts to become really cumbersome

and unpractical when we use many loops

for doing many operations.

So these methods that we've been studying,

they completely avoid this extra variable

and they simply return the variable

or the value actually right away.

All right.

And of course we can write here in an even simpler way.

So using an arrow function

and I will still keep this here

so that we can see the return that's happening.

So first we can get rid of this.

Then we get rid of this.

We also don't need any of this,

but here we always use or need the accumulator

and the current value.

So here we need parenthesis

then the arrow.

And then as always, we can get rid of all of this.

And so now still, or balanced is the same. Awesome.

So understanding how the reduce method works

is something really important,

but it's also way more confusing than the other ones,

but I'm sure you're well underway

of really understanding it.

And now that we know how it works,

we can actually now also calculate the balance

of these movements here and then print that balance

right here to our application and user interface.

And so let's go ahead and do that here.

So finally back to our application here.

And so let's do that down here.

So calc and print, balance.

And so this function here will once again,

receive the movements as an input.

So any array of movements will work.

And so now let's calculate the balance based on this array.

And essentially this is exactly what we wrote to before.

So that's movement dot reduce,

but it doesn't hurt to write it here again.

So remember the first parameter is now the accumulator

and only the second one is the current value.

So let's call it the movement now.

And so here simply we return the accumulator

plus the current movement and we start at zero.

Great. And now all we need to do is to display it

here in this element.

So let's check this out and it is called the balance value.

And just like before I already have it selected here,

and this is a label, so balance value is here.

So I called it label balance

and so label is basically all the things

where we simply want to put some text, all right?

So let's say label balance dot text content.

And this one we already know equals the balance

and let's actually do a template string here,

or a template literal and also display the Euro sign.

Well, I don't know where it is,

so let's just write EUR, which also means EURO.

And so now let's see of course

we didn't call the function yet.

So let's do that here as well.

And actually let's put this function here

where it makes a little bit more sense

because it kind of belongs to this display movements here.

Okay. So let's actually also call this one here,

calc and display balance.

So to give it a similar name as that one.

And so now I'm gonna call it, calc display balance.

And once again, I'm calling it with account one.

So account one dot movements,

and then later on, as we keep developing this application

of course these movements here that we're gonna use

will be from the account that locked into the application.

So if Jonas locked into the application,

then Jonas's movements will be shown and Jonas balance.

But if Steven locks in then of course

Steven's movements and Steven's balance will be shown here.

And right now we already see our balance up here.

And so this actually happens to be exactly the same

we calculated before.

So also 3,840,

because the movements are indeed also exactly the same.

Great. So that's beautiful with this,

we actually already completed some parts here

of our flow chart.

So let's also keep this one handy here

so that we can keep looking at it.

And so we already did calculating the balance

and displaying the balance.

So we did all this in just one function

and we also already have this playing the movements.

So indeed we are making some nice progress here.

And the rest that you see here

will be even easier as we go on.

Now, just to finish this lecture here about reduce

let me show you one final example

because we can also do other stuff,

than just adding up values

that would become boring at some point, right?

And so we can also do other stuff.

So this time, what I want to do is to get the maximum value

of the movements array here.

Okay, so in this case,

the result we're looking for is this 3,000.

Okay. And so for that, we can also use reduce,

because remember reduce is for boiling down the array

into just one single value,

but that value can be whatever we want.

So it doesn't have to be a sum.

It could be a multiplication

or even something completely different,

like a string or an object,

but here we will keep working with numbers,

but this time we want the maximum number.

So let's kind of go manually through this array

to determine what the reduce method should do.

So let's start here at 200.

Is this the maximum value at this point?

Well, we don't know yet because we just started,

so let's save 200 here mentally as our current maximum,

then we move on to the next value and we see 450.

So is this greater than our current maximum,

which was 200?

Well, yes it is, it is greater.

And so 450 is now our current maximum

then minus 400 is of course less than our current maximum.

Then we move on even further.

So 3,000 is a greater than our current maximum?

Yes it is.

And so that becomes our current maximum.

So we store this 3,000

and then we keep going through the array.

And as you see, there is no other value greater than 3,000.

And so in the end or maximum was this one, so 3,000.

Okay. And now all we need to do is to

essentially translate this into code,

using the reduce method.

So let's call it max movements to reduce.

And as always, we need the accumulator

and the current value.

So I'm calling it movement here again.

All right.

And now this time, what should be the purpose

of this accumulator value?

So that's always the big question that we have to ask

when we use reduce.

So up here, when we wanted to add all the numbers together,

the purpose of the accumulator

was to keep track of the current sum.

And so here, the accumulator will be the one

that will keep track of the current maximum value.

So let's just start by writing the logic here

in a bigger way so we can understand what's happening.

And then I will simplify it

to make this a one-liner function one more time.

So translating the logic that we just went over here

is to say, if the accumulator is greater

than the current value,

which is the movement, then return the accumulator, right?

Because in the reduce method,

we always have to somehow return the accumulator

to the next iteration.

And in this case, we simply want to keep the accumulator

at the value that it already is and not change it.

Okay. We want to change it in the other scenario, basically.

So when the current value is greater than the accumulator,

so that would be this case here.

So here, remember the current value is 450,

but the accumulator is 200.

And so now the movement is greater than accumulator.

And so what we want to return here as the accumulator

in the next iteration is the current movement.

And so that's it, okay.

And now we also need the initial value.

And so the initial value make sense to be

this first value here of the array.

Okay. And so that's movements at position zero.

Now we could have used zero here,

but that would not be correct

because imagine that the first value

would be like a negative,

then this might not work as expected.

Maybe it might work with the maximum,

but not with a minimum, for example.

So don't just put zero here

when you're trying to find a maximum or a minimum value,

always just go with the first value of the array.

Okay. And that's it.

Let's see if it works

and then we can maybe go over this again.

So indeed we get 3,000.

So we started at 200.

So in this iteration,

is the accumulator greater than the movement?

Well, it is not.

And so return the current movement. Okay.

But the first iteration is not that important.

It gets interesting here in the second one.

So now our accumulator is at 200

and the current movement is at 450.

So this one here is false again.

And so now we return to movement

as the new accumulator in the next iteration.

All right. And so in the next iteration,

that accumulator is 450 now,

then here, the current movement is minus 400.

And so here is 450 greater than minus 400.

Yes, of course it is.

And so let's simply return the accumulator

so that it stays the same in the next iteration.

And so that's the logic all the way

until the end of the array.

And, by this, we then end up with this maximum value.

All right. So I hope that made sense.

And in fact, there is a ton of things

that we can do with this reduce method.

It is by far the most powerful array method there is.

And because of that,

it can also be the hardest one to use.

So we always need to think exactly what we want

the accumulator and the core value to be

and how they should interact.

But I hope that with this exercise here

I could demonstrate the thought process a little bit

and throughout the section and the rest of the course,

there will be some more exercises of the reduce method

so that you can also learn better and better

how to use it yourself one day.