Skip to content
Related Articles
Open in App
Not now

Related Articles

JavaScript Array map() Method

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 19 Jan, 2023
Improve Article
Save Article

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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!