JavaScript Array map: Transforming Array Elements

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:, index, arr), thisValue)

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. 

    var arr = [2, 5, 6, 3, 8, 9];
    var newArr =, index) {
        return { 
            key: index, 
            value: val*val


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

    var name = "Pankaj";
    // New array of character and names
    // concatenated with 'A'
    var newName =, function(item) {
            return item + 'A';


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

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

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


36, 49, 16, 25

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

Recommended Posts