JavaScript Array map() Method

The Javascript map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally, the map() method is used to iterate over an array and calling function on every element of the array. 

Syntax:

// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function (element) { /* … */ })
map(function (element, index) { /* … */ })
map(function (element, index, array) { /* … */ })
map(function (element, index, array) { /* … */ }, thisArg)

Parameters: This method accepts two parameters as mentioned above and described below:

• function(currentValue, index, arr): It is a required parameter and it runs on each element of the array. It contains three parameters which are listed below:
  • currentValue: It is a required parameter and it holds the value of the current element.
  • index: It is an optional parameter and it holds the index of the current element.
  • arr: It is an optional parameter and it holds the array.
• thisValue: It is an optional parameter and is used to hold the value passed to the function.

Return Value: It returns a new array and elements of arrays are the result of the callback function. 

The below examples illustrate the use of the array map() method in JavaScript: 

Example 1: This example uses the array map() method and returns the square of the array element. 

Javascript

var arr = [2, 5, 6, 3, 8, 9];

var newArr = arr.map(function(val, index){
    return {key:index, value:val*val};
})

console.log(newArr)

Output:

Example 2: This example uses the array map() method to concatenate the character ‘A’ with every character of the name. 

Javascript

var name = "Pankaj";

// New array of character and names
// concatenated with 'A'
var newName = Array.prototype.map.call(name, function(item) {
    return item + 'A';
})

console.log(newName)

Output: 

['PA', 'aA', 'nA', 'kA', 'aA', 'jA']

Example 3: This example uses the array map() method to return the square of array elements. 

Javascript

// Map is being called directly on an array
// Arrow function is used
console.log([6, 7, 4, 5].map((val)=>{
    return val*val;
}))

Output:

36, 49, 16, 25

We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.

Supported Browsers: The browsers supported by the JavaScript Array keys() method are listed below:

• Google Chrome 38.0
• Microsoft Edge 12.0
• Mozilla Firefox 28.0
• Safari 8.0
• Opera 25.0

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript. 

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.