# 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.

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.