JavaScript Array map: Transforming Elements

Summary: in this tutorial, you will learn how to use the JavaScript Array map() method to transform elements in an array.

Introduction to JavaScript Array map() method

Sometimes, you need to take an array, transform its elements, and include the results in a new array.

Typically, you use a for loop to iterate over the elements, transform each individual one, and push the results into a new array.

Let’s take a look at an example.

Suppose that you have an array of numbers where each element represents the radius of a circle as follows:

let circles = [
    10, 30, 50
];
Code language: JavaScript (javascript)

The following illustrates how to calculate the area of each circle and push the result into a new array.

let areas = []; // to store areas of circles
let area = 0;
for (let i = 0; i < circles.length; i++) {
    area = Math.floor(Math.PI * circles[i] * circles[i]);
    areas.push(area);
}
console.log(areas);Code language: JavaScript (javascript)

Output

It takes a quite amount of code to accomplish this.

Starting from ES5, JavaScript Array type provides the map() method that allows you to transform the array elements in a cleaner way.

function circleArea(radius) {
    return Math.floor(Math.PI * radius * radius);
}
let areas = circles.map(circleArea);
console.log(areas);
Code language: JavaScript (javascript)

Output

[314, 2827, 7853]Code language: JSON / JSON with Comments (json)

How it works.

• First, define a function that calculates the area of a circle.
• Then, pass the circleArea function to the map() method. The map() method will call the circleArea function on each element of the circles array and return a new array with the elements that have been transformed.

To make it shorter, you can pass in the map() method an anonymous function as follows.

let areas = circles.map(function(radius){
    return Math.floor(Math.PI * radius * radius);
});
console.log(areas);
Code language: JavaScript (javascript)

Also, you can make use of the arrow function in ES6 to achieve the same result with a cleaner code:

let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);Code language: JavaScript (javascript)

JavaScript Array map() method in detail

The following illustrates the map() method.

arrayObject.map(callback[,contextObject]);Code language: CSS (css)

The map() method takes two named arguments, the first one is required whereas the second one is optional.

Similar to the other iterative method such as  every(),  some(),  filter(), forEach() and  sort(), the callback() function has the following form:

function callback(currentElement,index,array){
  // ... 
}Code language: JavaScript (javascript)

The callback() function takes three arguments:

• The currentElement is the current element of the array that is being processed.
• The index is the index of the currentElement.
• The array is the array object being traversed.

The currentElement is required while the index and array arguments are optional.

If you pass the contextObject to the map() method, you can reference the contextObject inside the callback() function using the this keyword.

It’s important to note that the map() method does not change the original array, it creates a new array of all elements that have been transformed by the callback function.

More JavaScript Array map() examples

The following example shows how to transform an array of numbers by using a built-in method of the Math type as the callback() function.

let numbers = [16, 25, 36];
let results = numbers.map(Math.sqrt);
console.log(results);Code language: JavaScript (javascript)

Output

 [4, 5, 6]Code language: JSON / JSON with Comments (json)

The new array contains the square roots of the numbers in the numbers array.

In this tutorial, you have learned how to use the JavaScript Array map() method to transform elements of an array according to a provided function.