Super Javascript
Home About RSS Guest Blogging

JavaScript Map

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?

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.

While you are here...

You like retro? I'm working on a guide where I will take you step by step to make a classic arcade game in JS. I can't wait to show it you.

There will be lots of opportunities to add your creative flair and make it truly your game. The guide will be free. If you want to be updated on the release of this book, just enter your email below:

Thanks!

See Also