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