Scribd
Upload
16 views

Mapping An Array

The document discusses how to use the map() method to transform each element in an array. It shows examples of mapping arrays to strings by adding HTML tags, mapping to objects, and chaining filter() and map() methods. Key points covered include passing callback functions to map(), returning values from the callbacks, and avoiding undefined returns by using parentheses when returning objects.

Uploaded by

crazyscientist996
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

Mapping An Array

The document discusses how to use the map() method to transform each element in an array. It shows examples of mapping arrays to strings by adding HTML tags, mapping to objects, and chaining filter() and map() methods. Key points covered include passing callback functions to map(), returning values from the callbacks, and avoiding undefined returns by using parentheses when returning objects.

Uploaded by

crazyscientist996
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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.

You might also like