Original subtitles

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.