JavaScript Map

The map function takes each item of an array, does something to the item, and creates a new array based on those changed items.

I will assume you know the basics of JavaScript Arrays. If not, please read my tutorial on JavaScript Arrays first.

Let’s start with a code example, which I will shortly explain.

If you want to convert a list of values in miles to kilometers, you can do something like this:

var miles_array = [1.5, 6.0, 11.3];
var kilometers_per_mile = 1.60934;
var kilometers_array = miles_array.map(function(m) {
  return m * kilometers_per_mile;
});

The result in the kilometers array is:

[2.41401, 9.65604, 18.185542]

How does that work?

Firstly we created an array called miles_array with the original values.
Next, we define a value kilometers_per_mile to help us convert the miles values into kilometers values.
We then used the map function to run a function against every item of the miles array, and put that into a new array called kilometers_array.
The function we defined takes a value m and returns m multiplied by kilometers_per_mile, which gives us the desired answer.
Because of map that function is run against 1.5, then 6.0 and then finally 11.3.
This produces 2.41401, 9.65604 and 18.185542.

Make JavaScript map concise with an Arrow function

In JavaScript, from version ES6, you can use the arrow functions in your code to save you having to type so much. With an arrow function you just write this:

var miles = [1.5, 6.0, 11.3];
var kilometers_per_mile = 1.60934;
var kilometers = miles.map(m => m * kilometers_per_mile);

The => is the arrow. The left of the arrow is the argument or arguments you want to accept, in this case m, the number of miles. The right is what you want to calculate based on those arguments, in this case m times kilometers_per_mile, the number of kilometers. Arrows are neat, compact and helps reduce the ‘noise’ in your code, so you can see what is going on more easily.

Arrow functions do behave a bit different from normal functions, in how they treat the this keyword. But the differences don’t affect this example or this discussion about map. If you want to learn more, there is an in depth page on Mozilla’s website.

Using the map index parameter

It can sometimes be handy to know the position of the item in the array when using map. An example of this would be creating a “table of contents”. The desired result might be something like this:

1. Introduction
2. How to throw a ball
3. How to catch a ball
4. How to kick a ball

Now if we start off with an array of descriptions:

var descriptions = [
  'Introduction',
  'How to throw a ball',
  'How to catch a ball',
  'How to kick a ball'
];

What we need to achieve in code is to add a number to each of those descriptions, counting from 1 to 4.

We can use map to do this as shown here:

var toc = descriptions.map(function (item, index) {
  return (index + 1) + '. ' + item;
});

We have taken advantage of a second parameter, index, which is the position of the item in the array. This will start at 0 and count up to 3. This means we have to add 1 to the index for our purposes. We then append a dot and space after the number and then the description of the item.

The + operator in JavaScript can do two things, it can add numbers and join strings together. In the example there is a + to add 1 to the index, and another couple of +’s to join the string fragments together to make the whole string.

This gives the result as described above:

[
  '1. Introduction',
  '2. How to throw a ball',
  '3. How to catch a ball',
  '4. How to kick a ball'
]

Summary

This tutorial covers the basics of the map function which is useful for situations when you need to take each item in an array and convert it to something else.

The map function is just one of many functions available for arrays, and there is a tutorial on JavaScript Arrays which covers that topic in more depth.

Thanks for reading, and good luck.

JavaScript Map

Make JavaScript map concise with an Arrow function

Using the map index parameter

Summary

See Also