JavaScript Array map Method Example

javaScript array map method example; In this tutorial, you will learn JavaScript Array map() method and how to use this method with js arrays.

JavaScript Array map Method Example

Suppose, you have an array , want to modify it’s an element, and create a new array as result form.

Use js for loop to iterate over array elements, change each individual one, and insert the results into a new array.

Let’s take a look at an example.

Suppose that you have a numeric array, where each element represents the radius of a circle.

See the following:

let circles = [20, 40, 70];

The following example, represents how to calculate the area of each circle and insert the output into a new array.

let circles = [20, 40, 70];
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);

Output

[1256, 5026, 15393]

Instead of for loop, you can use js map() method that allows you to modify the array elements in a more readable way.

let circles = [20, 40, 70];
function circleArea(radius) {
    return Math.floor(Math.PI * radius * radius);
}
let areas = circles.map(circleArea);
console.log(areas);

Output

[1256, 5026, 15393]

How it works.

• First of all, define array with elements.
• Next, 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 more concise, you can pass in the map() method an anonymous function as follows.

let circles = [20, 40, 70];
let areas = circles.map(function(radius){
    return Math.floor(Math.PI * radius * radius);
});
console.log(areas);

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

let circles = [20, 40, 70];
let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);

Syntax of JavaScript Array map() method

The following illustrates the map() method.

arrayObject.map(callback[,contextObject]);

Note that, The map() method accepts parameters, the first one is required whereas the second one is optional.

This method calls a callback function on every element of an array and returns a new array that contains the results.

JavaScript also has many iterative methods similar to map() method. Which is work with JavaScript’s Array. Such as  every(),  some(),  filter(), forEach() and  sort(), the callback() function.

function callback(currentElement,index,array){
  // ...
}

The js callback function takes 3 parameters:

• This currentElement parameter of an array is that, the current element, which processed by the callback function.
• The index is second parameter of an array is the current iteration index of an array element.
• The array is the array object being traversed.

Remember Some Points:

• Note that,index and array both arguments are optional.
• Note that second point, the filter() method does not change the original array.

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.

Example : JavaScript Array map() 

Let’s take look a example, you have number array and want to find the square root of this array.

See the following example:

let numbers = [25, 64, 81];
let results = numbers.map(Math.sqrt);
console.log(results);

Output

 [5, 8, 9]

The new array contains the square roots of the pass numbers array in map function.

Conclusion

In this tutorial, you have learned how to use the JavaScript Array map() method with js arrays.

Recommended JavaScript Tutorials