Jonas: So up until now,
we have been using the map filter
and reduce methods kind of in isolation.
However, we can take this one step further
by chaining all these methods one after another.
For example, let's say that we wanted to take
all the movement deposits then convert them
from euros to dollars and finally add them all up,
so that we know exactly how much was deposited
into the account in US dollars.
Okay.
Now we could of course,
do each of these operations individually
and store each result in a new variable.
However, we can also do it all in one go.
So let's do that.
And I will start here with the filter method.
So as I said, we want to take all of the deposits.
So we get the movement here
and then we filter only for movements that are positive.
And so only these are the deposits.
And so the result of this
operation here will be in your array.
And so now we can call map on that array.
So here again, we then get a movement
and now we can convert that movement to US dollars.
So we can do that with that variable that we used before.
Let's see where that is.
So Euro to USD.
So,
movements times Euro to USD.
And so with this we converted
all of the deposits to US dollars,
but now we can take this even further
and on this result, we can also call a reduce.
And of course we could also call more filters or more maps,
but now let's just do a reduce here.
And so basically add all of these values together.
And so we already know how that works.
So accumulator and then the current movement,
and we just need to return accumulator
plus the current movement.
So that's movement and zero.
And so now let's store all of this into total
deposits in US dollar.
Okay.
So you see that we did three data
transformations here all in one go.
So let's log it to the console to see that we
actually get a result here.
And yeah, we do.
So this is the deposits that we did
into our account in US dollars.
And as I mentioned we could of course
chain many other methods here as well,
as long as they return new arrays.
So filter returns a new array.
So we could have added something else here
or the same goes for map, but reduce,
for example, will return a value.
So only this number in this case.
And so of course here we could now not have chained
a map or a filter after this.
So we can only chain a method after another one,
if the first one returns an array.
So you can imagine all of this
as a sort of pipeline that processes our data.
So we put data in at the beginning, which is here,
and then it goes through all these steps.
So in this case,
these three steps here and then in the end our input data
comes out processed on the other side of the pipeline.
So let's just write this here
because I think this is a nice analogy, right?
Now, when we chain all these methods together here,
it can be a little bit hard to debug
if one of the results is not what we expect.
For example,
if this result here would be something really weird,
we wouldn't really know from which step of this pipeline
it would come from, right?
And to solve this,
it would be good to check out the array
in each of these different steps.
So let's say we did a mistake here
and we wrote it like this.
And so our result would come out negative
and that would be strange.
So in this case, it will probably be nice to know
the result of this filter operation.
And so we can do that by using the array parameter
that we get access to in this callback function.
Remember?
So we have the current element, the index,
and the entire array.
And actually let's duplicate this here first.
Okay and set this back to what it was.
Okay.
So that's now locked to the console, this array.
And so now we need these curly braces
because we will have a code block
and we need to actually return our calculation here.
But anyway, we can now take a look
at the whole current array that
this map method here is being called on.
So let's take a look.
And so indeed, it is this array
of the three negative movements.
So let's log the movements here one more time.
So you see that indeed
we get to these three negative movements now.
And so that is the result of this filter here.
And so again,
if we want to see that result of only this operation,
we can check out the current array
and the next array method that has chained on that filter.
And so in this case, it's the map.
And so this is one of the great use cases
of having access to this current array.
Because as you see, of course,
this array has to be the result of the previous operation.
So of this filter.
It is not this initial movement array
because that's not what we called the map method on,
right?
The map method was called on
the result of movements, that filter,
and therefore that is the value here of this array.
That makes sense?
Now it was of course logged here three times
because this callback function here is called three times.
So once for each of these three values.
Okay, so let's put it back to what it was
and now we get to correct array.
This one is now printed five times
because there are five values in the array.
Let's just turn this one off here as well.
And so this was just to show you that we can
inspect the current array at any stage of the pipeline
using the third parameter of the callback function.
All right.
And so now that we know how this chaining works
we can go back to our application here.
Let's give us some more space
and we can now calculate these statistics down here.
So that's all of the deposits.
So incomes here basically.
Then we have the outcomes.
So that's the sum of all the withdrawals
and then also an interest that the bank might pay us.
And so let's go back up here to the application.
And so we already have display movements,
calcDisplayBalance.
And now here I will create another
function called calcDisplaySummary.
And just as our previous function here
to calculate the balance
this one also receives the movements data.
And so we will also call it
with the account one dot movements.
And once again, we will then later change this
to the user that is logging into the application.
Okay, so let's start by calculating the incomes.
So that's this first value here.
And so that's all the movements.
And then we filter them for only the positive ones.
And so this is now exactly what we did before.
So greater than zero.
And now onto this one, we simply chain another reduce
because now we want to add all these
positive numbers together.
So there's no mapping involved here.
It's just filtering and then adding together.
Give it a safe and now we can put it here
inside of this label, so this HTML element.
So it's always a good idea to check out the name of it.
So this one is called summary value in.
So as before I already have that here,
so it's this one and it's called labelSumIn.
We will also then need labelSumOut and labelSumInterest.
So keep these in mind for a bit later.
So here we have
labelSumIn
and then our old text content property.
So incomes and then the Euro sign.
And now I know how it works.
At least on Mac, you can use the emoji picker
and then you just search for a Euro like this.
And here you go.
And I'm sure there is something similar on Windows as well.
Let me actually copy it and put it
also here instead of this Euro,
and to same also here in this movement.
So here where we display all the movements
so that the Euro sign also appears here on all these.
Okay, this should now already be working.
So let's give it a safe, but nothing happened here.
That's because I am calling the wrong function here.
So this has gotta be summary.
So I was calling calcDisplayBalance for a second time.
Now it works, so that's 5,000 Euros.
And you see that also now here we have the Euro sign
which makes it look a little bit more
like a bank application, right?
And now do the same for the outgoing money.
So we're going to calculate a variable called out.
And now I want to leave this one here again
as a challenge for you.
So that's a very simple one.
Just don't look at the rest of the code
and I'm sure you can do this one without any problem.
So that's just movements dot filter.
And so now it's basically just the opposite.
So the negative movements.
Okay, and then labelSumOut,
set to out,
and data did not work.
I see we have an error here.
And so assignment to constant variable.
Oh, I see.
We are forgetting here the text content property.
Maybe you saw that coming and now it works here beautifully.
Okay, now I just want to get rid of this minus sign here.
We already know that the money is going out,
so there's no need for the negative sign.
So let's just take the absolute value here.
So we did that before.
So math dot abs and this is going to remove the sign.
Yeah, beautiful.
Now finally, the interest here.
And so let's say that this bank pays out an interest
each time that there is a deposit to the bank account.
And that interest is 1.2% of the deposited amount.
Unfortunately in the real world, it's nothing like that.
But here in our fictional bank,
we can do whatever rules we want, right?
So as I said, the interest is paid on each deposit.
So first we need to get these deposits.
And so that's this filter here.
Let me just copy it.
Okay.
And so now on each of these deposits, we will receive 1.2%.
So what do we do here?
Well, we're going to create a new array
which contains all of these interests.
And then in the end we can just add them together.
And so map is the way to go here.
So we take the current movement
and we could even call this array a deposit.
Let's do that.
We know that this has to be a deposit.
And so let's call it that to make it a bit more explicit.
We could do the same here, but that's not necessary.
So we get 1.2%.
So we multiply this by 1.2 divided by 100.
So that's how you calculate percentages.
And then finally we just edit all together.
So let's just take this one here, chain it here,
and now each of the current elements
is no longer a movement.
So let me just call it here an interest, so int.
All right, and now let's also just copy this one here.
So labelSumInterest
and then here of course it is the interest.
And you see we got six Euros and 24 cents of interest.
Great, but now let's say that the bank
introduces a new rule.
So now the bank only pays an interest
if that interest is at least one Euro
or whatever other currency.
So where do we put that in our calculation?
So again, only if one interest is at least one
only then it will be added here to this total.
And so this sounds like it's gotta be somewhere
between this place where we actually
calculate the individual interests
and here where we then add them together.
So let's add a new method here in the chain
between the map and the reduce.
And it is going to be a filter
because we basically want to exclude
the interests that are below one.
So this one here is an array of interests.
And actually let's take a look also
at the current array here.
So interests then I, which we're not going to need,
and the whole array.
And so let's log to the console the whole array,
just to see what's happening.
But anyway, what we will have to do here
is to filter the results of culling these interests here
for values that are at least one.
So interests greater or equal one.
And only these interests will make it
into the final calculation.
So into the next step here of the pipeline,
which is this reduce.
So you see that the interest now decreased a little bit
and that's because indeed
here in this array of interests,
we have one value that is below one.
So this 0.84, and therefore it will get filtered out
in this new step that we added here to the processing.
And so then the final interest
that's going to be paid by the bank
is only these other four values added together.
So these three plus this one,
but this one here has been excluded.
All right, that makes sense?
So anyway,
this was another great part here of our bankers application.
So with this, we now also completed this part here.
And hopefully you can start to really appreciate
the huge advantage that working with these array methods
gives us over simply working with more traditional loops.
And now just to finish this lecture,
let me just give you a couple of remarks about chaining.
So first we should not overuse chaining,
so we should try to optimize it
because chaining tons of methods one after the other
can cause a real performance issues
if we have really huge arrays.
So if we have a huge chain of methods,
chained one after the other,
we should try to compress all the functionality
that they do into as little methods as possible.
For example, sometimes we create way more
map methods then we actually need,
where we could just do it all in just one map call.
So when you chain methods like this,
keep looking for opportunities of
keeping up your codes performance.
And second, it is a bad practice in JavaScript
to chain methods that mutate the underlying original array.
And an example of that is the splice method.
So again, you should not chain a method
like the splice or the reverse method.
I mean, you can do that,
and for a small application like this one,
it's not a big deal and it's not going to cause problems,
but in a large scale application,
it's usually always a good practice
to avoid mutating arrays.
And we will come back to this
when we talk a little bit more about functional programming.
Anyway, with that being said there is now
another coding challenge waiting for you.