Okay, so the next method I want to show you is the map method, and that is also very, very useful.
So the map method takes an array and then it maps that into a completely new array.
And by that I mean it iterates an array and it returns an updated value for each item in the array,
and then it pushes that updated value into a new array.
For example, we could have an array of prices like we do here, but we want a new array of sale prices.
Based on this, we could use the map method on the prices to iterate the array, perform a callback
function for each item, and then return an updated sale value for each price.
And then these updated values will then be stored in a new array returned by the map method.
So much like the filter method.
This is a non-destructive method.
It doesn't directly change the original array.
So let's see this in practice.
So I'm going to create a new constant to store the new array in and I'm going to call this sale prices
and I'm going to set that equal to prices, which is the original array dot map.
Then the map method takes in a callback function as an argument.
So let's do that.
And inside this callback function we return the updated value.
So we take in each individual price.
As we cycle through the array and inside we're going to return an updated value based on that price.
So say, for example, I want the sale prices to be half of what these are.
Well, I could return the price over two.
So what that's going to do is iterate this array for each item.
It's going to take in the price and fire this callback function.
Then we're returning a new value and that is going to be the price that we take in over two.
And that new value is going to be placed in the same position inside this new array sale prices.
So now let's log this to the console console dot log sale prices.
Oops.
We need to do our parentheses instead of a nine.
Save that and let's preview.
And now we can see we have these new prices which are exactly half of the other prices.
We have ten, five and 15, and that's half of 2010 and 30 and so forth.
So that's nice.
That's what the map method does.
It cycles through an array and we can create a new array based on that array.
So what I'm going to do is shorten this because we have one return statement.
So let's take away the curly braces first of all, and scoot this up onto one line and take away the
semicolon there.
We take away the return keyword as well and the parentheses since there's just one parameter.
So then that's the first example.
Now I'm going to do something which is a little more difficult.
So say we have some different data.
I'm going to copy this from my GitHub repository again, and this time we have a const product equal
to an array.
And inside here we have a load of different objects and each object is a product.
Now they have two properties, they have a name and a price and bonus points for guessing what this
is from.
It's Mario Kart, by the way.
But anyway, what we want to do is cycle through this array now, and I want to map this to a new array,
and I want to only change the price to half price if it's over 30 originally.
So for example, this would be half price, this would be half price, but these three wouldn't be because
they're not over 30.
So the sale only applies to certain items.
So I want to create a new array with all of the products in it and the products whose price are over
30 should now be slashed by half.
So this is a bit more complex.
But again, first of all, we create a new variable.
I'm going to call this sale products and I'm going to set this equal to the products array.
Then we map through the array.
We take in a callback function, which takes the individual product each time around as we iterate through.
And then inside we need to first of all check if the price is over 30 because we only want to change
the price in the new array if it's over 30.
So let's do that If check, first of all, we'll say if and then product dot price, that's the individual
product we take in on each iteration.
If that is over 30, then we want to return something new here.
Now, what do we want to return?
Well, we want to return an object because the new array is going to be made up of objects, much like
this is made up of objects.
So we need to return a new object and we can say inside the name of this object is going to be the product
name.
So that's the product that we take in.
We're getting the name property off it and setting it equal to the name property on the new object that
we're returning.
And now the price property is going to be the product dot price over two.
So we're returning now a new object based on the current object that we take.
But we're slashing the price in half.
So in the new array, it's going to have half the price.
If the current price is over 30.
So that's what we're returning right there.
Now we need to do an else clause because if the price is not over 30, we still need to return something
because we still want those products that are not over 30 in price to be in the new array.
It's just that we don't want to slash the price of them.
So all we need to do in this case is say return product like so.
So if we save this now and log out the sale prices, check it out in the console over here and we get
sale prices is not okay.
It's called sale product that's why so sale products and save and now we get this new array and we can
see now we have 25 instead of 50 and we have 20 instead of 40 at the top.
So where we had 40, it's now 20 where we had 50, it's now 25.
But the other three prices, they have not changed because we don't want to apply the sale to those.
And that's because of this logic right here.
Now, you might be thinking at the minute, why did we not just say instead of creating a new object,
why over here did we not just say, well, okay, well, the product dot price is now going to be equal
to the product dot price over two and then just return the product like we returned product here.
And we can't do that because when we change the product price here, we're directly editing the product
in this array.
So that would make it destructive.
And we don't want to do that.
We want to protect the original array and only update objects in the new array.
So if I was to save this now and run it again over here, then this still works.
We still get the correct output when we log the sale products to the console.
But if I was now to log also products like this and save it, they're going to be exactly the same because
it's directly edited the original one.
Because when we take in an item from an array, it's an object and we edit it over here.
It's editing it directly.
This isn't a copy of the object that we pass in.
It's the object directly that we're passing in.
So then when we edit it, it's going to edit the original value and we don't want to do that.
So that's why we create a new object over here because then that does not edit the original value because
we're creating a new object and we're setting that equal to the product price over two.
We're not saying the product dot price is now equal to the product price over two.
We're just saying the new price property on our new object is equal to this.
So if I save it and preview now, we can see the original array stays intact.
Okay, so one more thing.
We can take these parentheses off because it's just one parameter.
Save that and this should all still work.
Awesome.
So that is the map method really useful for when we want to create a new array based on a current array.
