Narrator: 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.