Original subtitles

Let's now use the map and for each method

to compute usernames for each account owner

in our application.

So we have these four accounts, and for each of them,

we want to basically compute a username.

And the username is simply the initials

of each of the users.

So let's just start with one of them,

just with one string to make it really easy.

And then we will generalize that function for

the entire accounts array that we have down here,

so which contains all of the accounts.

But for now, I will just grab this string here

and create a username for this one.

So let's do that down here,

after this first function that we created.

And for now, we will do this outside of a function

just to see how it works,

and then afterwards, we will create a new function.

So let's say the user is this one here,

and we want to compute the username.

So for this one here, the username should be stw.

So that's just the initials in lowercase.

And so let's do that.

So we start by transforming this string to a lowercase.

So we already know how to do that.

And now we simply want to take

the first letter of each of the words.

And so we need to basically split up the string

into the multiple words.

So this is a very common use case for the split method,

so dividing by spaces,

which will divide the string into words.

And let's just take a look at what we have now,

so that we can discuss our next move here.

So username, and so right now

we have Stephen, Thomas, and Williams.

And so how do we take each of the first letters here?

Well, we could simply loop over the array,

and then take the first letter in each iteration,

and add them into a new array.

And then in the end, we would join that array,

and we would end up with just a string of stw.

So let's do what I just said.

So looping over this array,

taking the first letter and then putting it

into a new array.

And that is exactly what the map method does.

We can do that directly here,

because this split method here returns an array.

And we can then call the map method

on that resulting array.

So we can immediately do .map here,

just like we can call the split method

on the result of the two lowercase method,

because this one here returns a string,

and split is available on all strings.

So let's define our callback function here.

And I will start by doing it with a irregular function.

And so here, let's say we get a word

or a name, it doesn't really matter here.

And so in each iteration, what we want to do

is simply to return the first letter.

So that's name at position zero.

And so right now,

this should be an array with only these three initials.

So let's see.

And yes, beautiful.

That worked just fine,

and so the results of this here,

of this whole thing, is now an array.

And on an array, we can call the join method.

So .join, and simply by an empty string,

and this will give us the final result of stw.

All right, great.

Now let's simplify this callback function here.

And again, I will start by deleting the function keyword.

Then we can also delete the curly braces,

and finally, also delete the return.

And so, see how simple this has become now.

So, we transform name to name at the first position,

so just the first character.

And one more time, don't forget that

this is actively returning here,

we just don't see it.

But the return is happening.

And this is the reason why this works,

because the callback function in the map method

always needs to return the new value

that should be in the new array.

All right, so this works great with this username.

Let's not take this actually into a function.

So, I'm cutting it here,

and let's say

create

usernames,

create a function, add this here,

and for now, let's say,

we get the user in here.

And so now we can call the function with this string.

And here, I called console.log,

instead of create username.

And yeah, if we want to see the result,

we would also have to log it to the console now.

So of course, first returning the username,

and then log it to the console here as well.

And so Indeed, we now get the same initial

that we had before.

But now we actually want to compute

one username for each of the account holders

in our accounts array.

So to do that, should we use the map

or the for each method.

Well, we do not want to create a new array

in this situation,

all we want to do is to modify the object,

so the elements that already exist in the accounts array.

So

in this array here,

and so what we want is to simply loop over

this array here, and then do something.

And so what we want that we use for each.

So let's modify this function here some more,

and instead of simply receiving one user,

what we want to do is to receive all the accounts.

So basically an array of account.

And this goes back to the philosophy

I explained to you in the last lecture, which is that,

each function should actually receive the data

that it should work with,

instead of using a global variable.

So that's exactly what we did here, with the movements,

which we could have read directly from the global variable

of account1.movements for example.

But instead, we created a function that receives that data,

and can then work with that data,

or with any other data that we choose to pass into it.

And so here we are doing the same,

we do not want to rely on the accounts array

that we already have.

But instead, we want to pass it into the function.

Let's get rid of all of this.

And so what I mean is to actually pass

the accounts array in here.

And here, it doesn't have to be called accounts.

Let's just call it like this, as an abbreviation.

Just to remove a little bit of the confusion

that you might have.

And now, as we were saying,

we need to use the for each method here,

because again, we do not want to create a new array,

we simply want to modify basically,

the array that we get as an input.

And this is a really important distinction to keep in mind.

So here we are again,

talking about the side effects that I mentioned

in the last video.

And in this case, the side effects are gonna be

to change, so to mutate the original accounts array.

And so that's what we want to do here,

and so for each is the way to go.

So for each account in the accounts array,

so I'm just calling this acc,

which is again, an abbreviation for one single account.

So for each account, we now want to do this here basically.

So let's grab all this, we can remove this.

And so let's create a new property on each

of the account objects.

So account.username,

and that will be equal to user.owner,

and so let's check out why that is.

So each of these accounts has the owner property,

and so that's where the name of the owner

of the user comes from.

So we take that,

so account.owner

and create or username from that.

So that's what we do here.

And then we create a new property on

that account element.

And yeah,

and that will then contain the username

that we create here.

Here we have some kind of error,

and of course, it's not user,

it is account.owner.

And now that's it,

and in this function, we do not return anything,

because again, what we're doing here

is to produce a side effect.

So we are doing something to this account object here.

And so there is no need to return anything.

We are just doing some work here, basically,

we are not creating a new value to return.

If we want to see if this actually worked,

we can lock this accounts object, or this accounts array

to the console.

And so in there, we should now see our objects

with a new property.

And indeed, we get the username of js.

And this one should be jd,

and here or Stephen Thomas Williams,

and indeed, it is the stw,

that we had previously worked with.

So in this lecture, it was very important to understand

the use case for the map method here, which was perfect,

because it allowed us to create a new simple array,

which only contains the initials of whatever name

it is used on.

And then on the other hand, the for each method,

it was a great use case to produce

some so called side effects.

So in other words, to simply do some work

without returning anything.

And so that's what we did here,

we simply looped over the accounts array,

and in each iteration,

we manipulated the current account object,

and edit a username to it

based on the account owner,

plus all of these transformations

that we had already done before.

So a couple of interesting and important takeaways

from this video.

So make sure to review it properly,

and then let's move on to our next transforming method,

which is the filter method.