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.