Original subtitles

Now, before we go to that coding challenge

that I just promised you,

let's actually practice this array methods

a little bit more.

And again, that's because I had many people actually request

yet another practice lecture of these array methods.

And so you asked for it.

And so here goes that lecture.

So again, here you can already see

the next coding challenge,

but let's for now focus a little bit more

on some array exercises.

And of course we're gonna continue working on

or accounts examples.

And the first exercise I wanna do here

is actually a very simple one

in which all we want to do is to calculate

how much has been deposited in total in the bank.

So in all the accounts across the bank.

So let's call that

bankDepositSum.

And so as always let's take our accounts variable,

which is that array which contains

all the four bank account objects.

Now, the first thing that we need to do here,

is to somehow get all these movements

that are in these different objects,

all into one big array

so that we can then from there filter the deposits

and then add them all together.

Just like we have been doing many times

throughout this section.

So let's use the map method here

because we basically want to create a new array

out of the accounts array.

But now we want to create an array

which only has all the movements.

And so, as you know, already whenever we want a new array

with the same length as the previous one

or as the original one,

then we use map.

And our callback function here, again,

each account is called like this

and then all we want to take out is account dot movements.

And let's start

by immediately taking a look here at

this variable

and of course, missing the log here.

And indeed we get an array of arrays

and here are all the different movements.

Now, how do we get all of these values

out of the arrays and into the main arrays?

So whenever we have an array of a arrays,

how can we basically remove all the values

into the parent array?

Well, remember that for that, we can use the flat method.

So just like this.

And now indeed, we got a big array

with all of the movements that we had previously.

However, I hope that you remember

that we can even simplify this here, even further.

So this map and flat, because as it turns out,

it's very common that we want to do these two operations

at the same time.

And so that's the case here.

And so instead of map, we can simply use flatMap like this

so that will apply or a map callback function

and then flattened the result.

And so you will see here

that the result looks exactly the same.

And now all we need to do is to filter for the deposits.

So basically for the positive values.

And so this is nothing new at this point

and the same for now adding them all together.

So we have done that many times before

so that's just write it out here

as we already know how it works.

And here we go.

So the result is 25,180.

And let's say that there are all in the same currency,

so all dollars or all euros.

So this part here was the same as we had done before.

The only trick was really this part here.

So getting all the different movements array

out of the accounts array

and then putting them in one flat array

so that we could then filter and add them all together.

Let me just add here numbers.

So that was exercise number one.

And now in exercise number two,

I want to count how many deposits there have been

in the bank with at least $1,000.

So let's call this here, numDeposits$1000.

And there are actually two ways of doing this.

So I will start with the way that is probably easier.

But then after that, I will actually save the same problem

using the reduce method.

So many people have asked me for advanced use cases

of the reduced method

because it is probably the most difficult of all of them.

And so therefore I want to show you

how we can basically count things,

we're using the reduce method,

but again, let's start with the easier solution here.

And so if we want to count the deposits

basically now we have to do the same thing

as we did here.

So we have to take all of the movements

and put them all into one array.

And let's lock that here already

and here it's accounts.

And so you see, we have a similar result to previously.

And now what we could do here is to filter

for movements greater than a thousand,

like this.

So movement greater than 1000

which leaves us only with these.

And then from that, you can simply take the length.

And so this will then return five.

And indeed this shows us that we get five deposits

over $1,000.

Let's say at least, so greater equal.

All right.

So that was one way of doing it.

Let's comment it out

because as I mentioned before,

I actually want to show you

how we could do the same thing using reduce.

So let's get rid of this part

because the flat map, of course, we still need that.

We still need that array with all the values themselves.

Now, okay, so you're already know

that the callback function of the reduced method

always has as a first parameter,

basically the accumulator.

So that's like the snowball

onto which we want to accumulate a certain value.

So here that is the sum which we started at zero

and then onto that sum,

we keep adding the current element

and then basically in each iteration we returned

the entire new value.

So the previous sum plus the current value.

So again, this year is the accumulator,

which is like the snowball onto which we keep adding

our snow which in this case here was the sum.

But now in this case, our snowball,

so our accumulator will be the number of movements

that are greater than a thousand.

So let's call that the count.

And then here again, the current.

And here we're gonna have the function body.

And again, we will start counting at zero.

So this initial value right here

is just like having any value outside of a loop

where we keep storing a new value.

And that new value might very well be a counter

that we only update on a certain condition

which is exactly what we're gonna do now.

So we will say that whenever the current value

is greater or equal than 1000,

then we want to return the count plus one.

And otherwise we just want to return the count.

So give it a save and here we get our result.

I think it was five previously.

Let's just take a look at the array itself

by simply logging into the console here like this

or we should probably even do this

to actually see the whole array.

And you see that it is indeed six.

So before it was just five because I had it like this.

And so you'll see, there is one movement with a thousand.

And so then it is only five,

but matters here,

and let's get rid of this.

So what matters is that or reduce function here works

so we can even use reduce

to basically simply count something in an array.

So what's important to keep in mind

is that we have this value here outside.

So this accumulator, which we can use

to reduce the array down to anything that we want.

And in this case, it is a counter

but it could really be anything.

And we will actually do something even more sophisticated

in the next example.

But for now I want to bring your attention

to this part here of the code.

So this adding one.

So you know that there is an operator for simply adding one.

So let me duplicate this here.

Then I will comment it out.

And again, you know that we can simply use a plus plus here

like this.

Or at least we think so, because now as I reload,

we are back to this being zero.

So why do you think that is?

Well, there is actually something that I didn't tell you

about the plus plus operator.

And so I thought that this was a good opportunity

to maybe clear that up.

And for that,

let's simply do a very simple example down here.

Let's say, let a equal 10,

then let's log to the console a plus plus.

And so again, you see that a is actually still 10

even though we used this plus plus here.

So why is that?

Well, the plus plus operator

does actually increment the value

but it still returns the previous value.

So if we now log the a again here, you will see that now

it is indeed 11.

So the plus plus operator did its job here.

But the thing is that when we use it like this,

it will still return the all to value, which here was 10.

And so the same thing happened here.

So we did count plus plus

which then increased the value from zero to one.

But the result of this expression here is still zero.

And so zero was returned here to the next iteration.

And therefore in the end we will always have zero.

So like this, it's impossible to increase the value

to one, two, three, four, five, and six.

So this is actually something really important to understand

about the plus plus operator

and which I didn't make really clear before.

Now fortunately for us, there is an easy solution

because we can simply use the so-called

prefixed plus plus operator.

So we can write it before the operand.

So plus plus a, and so now the result of this here

should already be 11.

So both of these should now be 11.

And indeed they are.

And so if we do the same thing here

then that will now finally increment or counter here

and we are back to seeing six as our result here.

So let me keep this one here, actually

just as a reference

again because I didn't talk about this before.

So that was exercise number two.

And now let's go to exercise number three

which will be an even more advanced case

of the reduce method.

And in this one what we're gonna do

is to create a new object instead of just a number

or just a string,

because why not?

So we already know that reduce boils down a array

to just one value.

And so that value might very well be an object.

It could even be a new array as well.

And in fact, we could use reduce to replace many

of the other methods that we have.

So reduce really is like the Swiss knife of array methods.

We could use it for everything.

Okay and with that being said, let's get started

on this exercise of which the goal is to create an object

which contains the sum of the deposits

and of the withdrawals.

So basically we want to calculate these two sums

all at the same time, all in one go using the reduce method.

So let me call this one sums

and then we have to start again this way.

So we need to get all of our movements into just one array.

So I'm just copying that.

And then here comes the reduce method.

So here the first element as always, it's the accumulator

which again, I will just call sums

and then the second one is the current value.

Here we will actually need a function body

to write our code.

And then we need the initial value

of the accumulator as always.

And as I was saying,

the goal of this exercise is to create an object.

And so our starting point then of course also needs

to be an object.

And this could be an empty object just like this

or we could of course also already start filling it.

So let's say that we want to start with deposits of zero

and withdrawals at zero as well.

Okay.

And now here in our function body,

we can simply basically ask

if the current value is a deposit or a withdrawal.

And once again, we do that by checking if the value

is greater or below zero.

So if it's greater than zero,

and here again, using the turnery operator.

So if it is, then we want to add the current value

to the deposits.

So to this value here in our object, right?

Now here in this callback function,

what actually is this object here.

Well, it is simply sums, which is or accumulator, right?

Because this year is always the initial value

of debt accumulator.

So of this variable.

So we can access the deposits on sums

that deposits and we can then add the current value

on to that.

And if not, so if current is below zero

then we can add it to the withdrawals.

Now we're actually not yet done here

because remember that in an array function,

the value is only automatically.

So implicitly returned when we don't have a function body

with curly braces.

But right now we do here.

Right? And so therefore we have to explicitly

so to manually return the accumulator from the function.

So that's how the reduce method works.

We always have to return the accumulator

from each iteration.

Now, usually that happens implicitly like here

but you already know that this here has an implicit return.

But this is easy to forget in these cases.

So that's why I'm emphasizing it here.

So again, we always need to return in the end,

the accumulator.

And so now this should actually already work.

So sums

and indeed we get all the deposits and all the withdrawals

and this value should be the same.

Yeah, as this one here.

But now we calculated it in a different way

and put it directly in an object

by using the reduce method like this.

So that's great.

And let's actually distract this object immediately

so we can do this.

So we need to now use the exact same names as here.

So deposits and withdrawals.

And so here we can now log these two to the console.

And indeed, we now get these two values here.

Now this works just fine already

but I don't really like this part here so much.

So let me just show you another way in which we could do it.

So I'm just commenting it out here.

Maybe you actually like this part here more

but we actually have some duplication here.

And so let's fix that.

So this part here is very similar to this part here.

All that changes is the deposits and the withdrawals.

And so we can actually do this.

So here we can now conditionally say

that we want to select either deposits

or withdrawals based on this condition.

So using here the brackets notation instead

of the dot notation.

So in this case, we will want to get the deposits

and otherwise the withdrawals.

And so then it's onto this value that we want to add

the current one.

And here I probably have some spelling error

and yeah so we get the same result.

But I think that this way here is just a little bit cleaner

but in any way, what matters here is that we were able

to create a brand new object based on the reduced methods.

And this can be really helpful in many situations.

And so please take some time to review this exercise

because this was really a great use case

on how to use something other than a primitive value

as the accumulator of the reduced method.

And I would even challenge you to do this with arrays.

So as a challenge would challenge you to recreate

any of the examples that we did previously

in the section with map filter and reduce

to use only the reduce method.

And that is totally possible.

And so, yeah, you can try that out.

You don't have to, and I will certainly not do that now

but as an exercise and to get an even better understanding

of the reduced method, you could totally do that.

Now, this lecture is already running a bit long

but I still have one more exercise here for you.

So let's quickly do that.

And this one will not have anything to do

with the accounts now, but instead, what I want to do now

is to create a simple function to convert any string

to a title case.

So title case basically means that all the words

in a sentence are capitalized except for some of them.

So there are some exceptions.

Let me try an example here.

So this is a nice title

would be converted to this

is and the a is lowercase.

So this is one of the exceptions and then nice title.

So let's get to work here.

So convert title case,

it's gonna be a function which takes a title

and will then convert it.

And so this is gonna be a nice exercise combining string

and array methods, all in one function.

Let me start by writing

an example of a string here that we might

want to capitalize.

So convert title case, and let's actually try this one.

Let's also try some more,

this is a long title,

but not too long.

So just to see what happens here

and also just to put some of the different exception words

in there

and

is another title with an example

like this.

And so now we can worry about writing our function here.

And let's start by creating an array,

which contains the exceptions.

So the words that should not be capitalized

and the exceptions are a, n,

the,

but

or

on

in and with.

And there might be some other exceptions here

but this is just an example.

Or you can always search for title case on Google

and see the exact rules if you want to make sure

that this really works.

now, right?

And by the way, it is a bit of a common pattern

to create an array of exceptions and then use that

for some computation further down the road.

I've done this myself many times.

That's all keep this technique in mind

but now let's go on to the actual conversion.

So let's call it title case.

And so of course, we must work on this title argument

that comes in.

And so what should be start by doing.

Well, first of all, let's do something

that we should many times do with our input strings,

as I mentioned before

which is to convert them all to lowercase.

And this is especially important in this case

because we are now working with capitalization.

So we will capitalize some of the words.

And so they should of course all be lowercase to start with.

So that's then going to affect like this or this board here.

Then we need to capitalize each word here individually

of course.

And so we need to be able to work individually

on each of the words.

And so whenever that is the case, we need an array.

So we need to split this string into an array

so that these words, which are separated by spaces,

each of them are going to be one of the elements

of the array.

So split and then by the empty string

and then by the space character.

And this is of course far from being done,

but that's none of the less already returned us

just to see if it works.

So this is exactly what we just did.

And so now let's work on these words.

So basically we want to now go through the array

and capitalized each of the words

that is not in the acceptance array.

So here, for example, the a is in the exceptions array.

So we don't want to capitalize this word

but we want to do it for all the ones.

So basically we want a new array

which all of these same words here.

So the same five elements, but some of them capitalized.

And so again, whenever we want a new array

of the same size as before, we use map.

And so now finally, or old friend map comes into play again.

So in this array, each element is a word

so let's call it that.

And so again, we want to capitalize it.

So let's just do it for starters, for all of them.

And remember that one of the techniques to doing that

is to take the first character of the string

so like this and put it to uppercase

like this.

And then we simply add the rest of the string to it.

Remember?

So we did that previously.

And so the rest of the string is basically taking everything

starting at position number one.

So let's check that

and indeed it worked beautifully.

Now, the only problem is that we have these exceptions here.

So we have an a here and a but,

and here is a width.

And so you want to now use the exceptions array

to exclude them.

So how should we do that?

So excluding kind of sounds like filtering maybe

but that's not what we want here

because we still want to keep an array of the same length.

We just don't want to apply this year to all the words.

And so what we're gonna do here is another logic.

So we will do

exceptions and then we are going to check

if the current word is included in that array.

And so for that, we have another array methods

which we studied many times before

which is called includes.

So here we are checking for that word.

And then as you notice, we'll return a boolean.

So true, false.

And then we can use that boolean to basically ask

if the word is an exception or not.

So if the word is indeed included in the exceptions,

then we want to simply return that word.

And only otherwise we want

to then return the capitalized version.

So let's check and indeed that already worked.

So a and but, and down here do you with

are now no longer capitalized.

Let's actually change or fixed that here

exceptions

like this.

So that looks better.

So again, let's go over that logic here.

So if the current word, so for example, this a here

is included in this exceptions array

then simply return that word.

So without any modifications,

but if not, well then capitalize it

according to this rule or just technique here

that I demonstrated earlier.

And so after that, it is actually really easy.

Now, all we have to do is to join the array back

with the space and there we go.

That's actually it.

I noticed that I just forgot one word here, which is and.

So that's also an exception.

Let's give it a save.

And so this creates this weird situation

where the first word of the title

is actually not capitalized.

And of course we don't want that

but that's actually an easy fix.

All we have to do is in the end

then capitalized that entire title case.

So basically doing this here on the final output

that we have here.

But let's not copied this.

Let's instead re-factor this into a standalone function.

Let's put it in here actually

because we don't need this function anywhere else.

So capitalize,

it takes a string.

And then here, instead of words,

we will use string to make it a general function.

And then here we will call it with word.

So everything works the same.

And then as I mentioned earlier

when we returned the title case,

we simply capitalize it again.

So just to make sure that a situation

like this here does not happen.

So title case

and here we go,

problem solved.

Nice.

So I hope that these were four nice examples

for you to practice these array methods even more

so that you are not ready finally

for the final coding challenge of this section.

So let's go there right now.