Mapping an

Array
map() method
Another useful and powerful method we have in
JavaScript is the map() method.

With this method we can map each item in the array to

something else.

From this example, we have an array of positive

numbers.

Now we are going to construct some HTML markup,

using the elements in the array
array.map()
If we call filtered.map() we can see that we need
to pass a callback function.

This function, just like the function that we passed

to the filter method, can have three parameters:

● Value
● Index
● Array

In this case, we only need the value so we can

pass a function or an arrow function.
Creating
markup
Here we give a number(n) some HTML markup.

First, we can add a string, with an opening list item element.

Then we add the number, then finally the closing list item element.

With this markup, we can display each number using a bullet point.

We store the result in a constant called items, then we display the

result of the map() method in our console.

Here you can see each number is now mapped to a string, that's our
list item.
Joining the
array
We now have an array of strings, that we can use the join() method
that we learned about earlier to join the elements of this array and
create a string.

Here we have declared a constant called html, and assigned the

value items.join() to it, which on the console is now displayed as a
string.

* Note that by default, the comma is used as the separator, so here

we join the elements with an empty character
Adding the UL
The only thing needed is to add the ul tag around the items.

Here we have a simple implementation, by adding opening and closing ul tags, and
concatenating the items in between these tags.
Mapping to an
object
Instead of mapping to a string, perhaps
you want to map to an object.

Here we have defined an object, and we

set the value to the number parameter (n).

Finally we return the object.

In the console, you can see that the objects

were created with the correct number and
values
Shortening the
code
There is something a little tricky that can
happen with our callback function.

Here, we are declaring a constant and the

returning it.

Technically we don't need to declare the

object as a separate constant, we can
simply return the object itself.

In the log, you still get the same result.

Shortening
even more
Earlier we learnt that of we have a single
line of code, and we are returning a value,
that we can exclude the return keyword, as
well as the curly braces.

However, if we do this, we get 3 undefined

elements in the console.
Curly braces &
arrow functions
The reason for this is by default these curly braces in an
arrow function, represent a code block.

When the JavaScript engine tries to parse this arrow

function it thinks here we are defining a code block as
opposed to an object to return.

If you're returning an object you need to put that object

in parenthesis.

Now our JavaScript engine will not look at this as a

code block.
Method
Chaining
Both the filter() and map() methods return a new array - they do not
modify the original array.

These methods are chainable, which means we can call them one after
another in a chain.

In our example, the filtered constant is only used with the map
method.

We don't have to explicitly store the result of this statement inside a

separate constant.

Instead, we can call the filter method, then immediately call the map
method.

This is what is called chaining.