- [Instructor] The map method for arrays
to serve special mention
because it is heavily used when working
with complex lists of data
and when using frameworks like React.
The map method takes an existing array,
then does something to each of the items in the array
and returns each of those items into a new array.
In contrast, for each array method we looked at earlier
loops through the array
but doesn't create anything unless
we explicitly tell it to
and nothing is ever returned into something else.
So if we need to create a new array with the items
from an existing array
and we want to change those items in the process,
we use the map method.
Looking at our foreach example from earlier,
you see we use the foreach loop to loop
through each of the items.
Then we create a new element for each item,
insert the item value into that element the "li"
and then we append that item immediately
to the stuff list ul so that it appears.
But in many cases we may want to do this differently.
Maybe we want to first create those new elements
and then maybe do something else
and then append them directly to create element.
For that purpose,
we would use the map method instead.
So let's see how this would wire together.
First, I want to change this foreach loop into a map loop.
To do that, I need to create a new constant
and place the map loop inside that constant.
So I'll say const,
we'll call this one stuffItems equals.
Then right now we have stuff foreach,
so I'll change that to stuff map.
And then change this to map array method.
All right, now we want to do the same things.
We want to create that list item
and populate the list item
with the value of the individual item we're looking at.
But instead of appending it directly
to the stuff list ul immediately,
we want to return this new list item back to stuffItems
to create a new array.
So I'll cut this out because we'll use it later.
And then I'll say return listItem.
Now, when we run this,
we'll get a new array called stuffItems
that has each of the items from our stuff array,
but with an li appended around it.
We can then try to output all this stuff.
So we'll say console.log,
and then we'll say stuff first,
and then console.log stuffItems.
That's the new array we just created using map.
Save that, go into our console.
And here you see we now have two arrays.
The first one has just items.
The second one has list items
and inside each list item,
we scroll down here you're going to see the value
of each of these list items is whatever it is.
So in this case, indexHTML, piggy, and so on.
And each of these list items is a proper object
inside the DOM that we can then apply somewhere.
Now that we have a new array with the list items,
we need to use foreach loop
to loop through each of them
and then append them to the stuff list ul.
So I'll say stuffItems.foreach.
Then we grab each item,
create an arrow function,
and inside each item you want to grab stuff lists,
that is the ul up here
and append the list item to that item.
Sorry, this is the item now, like that.
Save, and now we get the same response as we did before.
So why on earth would I want to do this?
This just made the process more complex?
Well, the reality is,
in many cases simply iterating through an array
and outputting the content right away
is not what you want to do.
More often than not,
you want to create a more complex array first
and then perform other actions on that array
before you output it to the browser
or do whatever you want to do with it
and that's what the map method is for.
Now that you know how to use the map method, a caveat.
You'll see the map method used a lot in modern JavaScript
especially in JavaScript frameworks.
And a lot of the time it's used to just iterate
through an array just like we did with the foreach method.
This is an anti-pattern and it should be avoided.
Map is specifically for when you need
to create a new array to do something further with the data.
If you just want to iterate through an array,
and then output the content right away,
use a foreach loop,
that's what it's for.
The reason people are using map like this,
is quite simply that map is a trendy new tool
and people like to follow trends.
What can I say?
People do weird things sometimes.
So if you need to iterate through an array, use foreach.
If you need to create a new array,
out of an old array and do something
to each of the items before you do so,
then use map.