Original subtitles

Let's now start seeing

the three data transformation methods in practice,

starting with the map method in this video.

And as we just learned, the map method

is yet another way that we can use to loop over a race.

But unlike for each, the map method will give us

a brand new array

and this new array will contain in each position

the results of applying a callback function

to the original array elements.

So let's see how that works.

And let's start by bringing back our movements array here,

so this one, so we will once more work with these movements.

And in this one, we will try to convert them to US dollars.

So let's suppose these movements are in euros

and we now want to convert them to US dollars.

And let's suppose that one Euro is worth $1.1,

so let's just store that conversion rate here first

to a separate variable.

So Euro to USD is 1.1 and so now what we want to do

is to basically multiply each element

of the movements array by this 1.1.

So let's say movements.map, and then just like

in a, for each method, we need a callback function.

And this callback function also gets as an argument,

the current array element.

So again just like in a, for each method

that we studied before

and that's why I said back then

that once you understood the for each method,

all the other methods will then become

a lot easier to understand.

So let's call this one here, a Mov one more time.

And then here in the callback function

we need to return the value that we want the new array

to have in the current position.

And so in this case, we want the original array

times the euro to USD conversion rate.

And this will make sense when we now see this result.

And so let's actually store it to a variable.

So we already know that the map method will return

a brand new array.

And so we need to store that somewhere.

So let's call it movements USD, and then let's log both

to the console movements and movements USD,

give it a safe and sometimes we need

to reload the page as well.

But anyway, here is the result.

Now, nevermind these multiplication errors here.

I'll explain you a little bit later where they come from,

but essentially this new value here is now 220

which is exactly 200 times 1.1.

And so indeed we ended up with a new array

containing all the movements

but convert it from euros to US dollars.

And again that's because that is exactly

what we returned here from this callback function

we could of course have returned simply something else.

So we could have returned simply 23.

And so what do you think we will end up in this situation?

Well, we now simply have an array of the same length

which in each of the position contains 23

because that's what we returned from the callback function.

And so in each iteration of the original movements array

it simply put 23 into the new array at the same position.

But of course that's a little bit useless.

And so let's go back to the example that we're working with.

Great, and of course you can also see

that the original movements array

was not mutated at all right?

And so indeed the map method really only returns

in new array with the new elements.

And this really is the fundamentals

of how the map method works.

So we can use this

and we will use it in all kinds of different situations.

Now, just for fun let's write the same thing here

using a for off loop, so we can create another Muff.

And then we are looping the movements, of course.

And so in this loop, we want to create a new array.

And so in this case

actually, we first need to create that new array.

So let's call it again, movements USD,

but then for, so here we first need to define that MTRA

and then as we loop over movements

we keep pushing a value to the new movements USD for array.

So push mov current element times euros to USD,

Let's log that as well,

and it should look exactly the same,

and in fact it does.

And so, yeah, we could have written this here

and it doesn't look too bad either

but it's a completely different philosophy.

So here in the map method, we use a function

to solve this problem of creating a new array.

While here we simply loop over one array

and then manually create a new one.

So these are completely different philosophies

or we can also say paradigms.

So this here is more in line with functional programming

which is something that I have mentioned

a couple of times in this course.

And we will talk about it later in greater detail

and in modern JavaScript, there is definitely

a push going on in the direction of functional programming.

So over a more functional language.

And therefore in modern JavaScript this here

is the way to go.

So using methods together with callback functions

like this, is the new and modern way of doing stuff.

All right, but now let's actually make

our callback function here, look a little bit cleaner.

So this callback function we can simplify it greatly.

So do you remember arrow functions.

We could perfectly use an arrow function here

and simplified as here into just one line of code.

So here is my challenge for you.

Do you think that you can do that yourself?

So basically replacing this callback with an arrow function

take a minute and see if you can do that for yourself.

And I'll see you back here in a second.

So let's just copy this and then replace this by parts.

So first we can remove the function keywords

and then replace it with an arrow.

Then we can also remove these parenthesis here

because there's only one argument.

And finally, since we only have one line of code,

we can remove the curly braces

and we can even remove the return statement.

And so this code that we have here now

is exactly the same as before.

So we can comment out this one here.

And of course I'm leaving it here for reference,

but as I save it now you see that the result

is exactly the same.

And so here we now have a nice and clean

one liner callback function, just like this.

However many people don't like the way that this looks.

So they argued that this lacks the function

and the return keyword which they say

it leads to bad readability.

And that it makes this whole thing

more difficult to understand.

And while I can see that, that might be true.

I actually do prefer the fact how much smaller

and cleaner this code is.

So in my opinion if you understand well enough

how the arrow function actually works

then you will become familiar with this pretty quickly.

And so then there is no problem in writing code like this.

Okay, the main thing that you need to keep in mind

is that here we are actually returning this value.

So you need to remember

that this is like writing return here.

And so if you understand that, then you're good to go.

So I will actually use arrow functions in this situations

in the rest of the course, because I believe

that they are perfect for these small callback functions.

In my opinion they were really developed

for this kind of application.

But as always, if you do prefer the irregular

function syntax then please feel 100% free

to keep using them instead.

And with that being said, let's now experiment

a little bit more and explore the map method some more.

So just like to for each method,

the math method also has access

to the exact same three parameters.

So besides the current array element

which is this one here, we also get access

to the current index as well as the whole array.

So let's now use the map method to loop again

over the movements array.

But this time we're gonna create a string similar

to the one step we printed

to the console earlier using for each.

So let me actually get that logic.

And so it's this one here.

So let's specify a callback function

and indeed now I will actually use an arrow function.

And so, as I said, we get access to the current element

but also to the index and to the entire array

this time we do need a block, at least for now.

And then here we have our logic.

Now in this case, we will not lock something to the console.

So instead we want to return the string

so that it then gets put into the new array,

that results from the map method.

So let's say here movementsDiscriptions

so that's a long name, but anyway

again, here we do not want to lock something to the console.

So we don't want to simply do something with this value.

Like we do when we console.log instead

we really want to return it.

And so that will then place this value into the new array.

So let's save that.

Let's then also log this

to the console movementDescriptions.

And so indeed we get to this array

with these strings that we previously logged to the console.

And by the way it's completely acceptable

to have to return statements

or even more in the same function

as long as only one of them is executed, right?

So in this case either this one here is executed

or this one, it's impossible for both of them

to return at the same time, right?

And actually we can even simplify this whole thing here

because these two strings are essentially

the exact same thing, except for this word here.

And so let's do something else here, right.

Now you also have this math.absolute value

but if the value is already positive as it is here,

then that simply makes no difference.

And so let's use a ternary operator here,

to put either withdrew or deposited right here.

And so this has nothing to do with the map method,

but yeah, it's a good way to also keep practicing

the other skills that we have been learning.

So we can check if the movement is greater than zero.

So the same condition as here.

And if it is then at this part of the string,

it should say deposited.

And if not, well, then it should say withdrew.

And so like this, we built this string all in one go.

And so we can get rid of this.

We can get rid of this.

And so therefore we don't need the return keyword anymore.

And so it works just the same.

Okay, now, in this case, we don't need this array here.

So that's actually also get rid of it.

And it's a good idea to keep in mind why we actually

get access to these two parameters here.

So one more time, all we do here is to pass

this callback function into the map method, right?

But we do not call this function by ourselves.

It is the map method who we'll call this function

for each of the array elements in the movement array.

Okay, now each time that the map method calls or callback

it will simply pass in the current array element as well

as the current index and the whole array.

And off these three, here we are only using the first two,

just the current element and the current index, all right?

And with this, I hope that by now

it is really crystal clear how this all works.

Now you could say, that what we did here

with this map method is essentially the same

as what we did with the, for each method.

But in fact, there is a big, big difference

between these two approaches.

So before we printed each line individually

to the console, as we were looping over the array.

So in each of the iterations, we performed some action

that was then visible in the console

and we can call this a side effect.

So the, for each method creates side effects.

But now here with this map method,

all we did was to return each

of the strings from the callback.

And so basically they got added into a new array.

And then finally we logged that entire array

to the console and not the elements one by one.

And so here in this map method

we did not create a side effect in each of the iteration.

All we did was to build a brand new array

and this idea of side effects will become important again,

as we talk more about functional programming.

Great, and this is how the map method works,

in the next video, we will see a more practical application

of it in the context of our Bankist application.