Home >>JavaScript Array Reference >JavaScript Array map() Method

JavaScript Array map() Method

JavaScript Array map() Method

The JavaScript array map() method is used to creates a new array with the result by calling a specific function on every element in the parent array. It is a non-mutating method and does not change the original array.

Syntax:
array.map(function(currentValue, index, arr), thisValue)

Parameter Values

Parameter Description
function(currentValue, index, arr) It required to be run a function for each element in the array.
Function arguments:
Argument Description
currentValue It required the value for the current element
index It is used for the array index of the current element and it is Optional
arr It is used for the array object of the current element belongs to element belongs to
thisValue It is optionaland is used for a value to be passed to the function to be used as its "this" value.If this parameter is empty. "Undefined" value will be passed as its "this" value.

Browser Support

Method Chrome Edge Firefox Safari Opera
map() Yes 9.0 1.5 Yes Yes
Here is an Example of Array map() method:
<html>
<body>
<button onclick="myMap()">Click me</button>
<p id="map"></p>
<script>
var numbers = [4, 9, 16, 25, 36, 49, 64, 81, 100];
function myMap() 
{
  z = document.getElementById("map")
  z.innerHTML = numbers.map(Math.sqrt);
}
</script>
</body>
</html>
Output:

Example 2:
<html> 
<head> 
<title> JavaScript Array map() Method </title> 
</head> 
<body>
<div id="map1"></div> 
<script> 
  var y = document.getElementById('map1'); 
  y.innerHTML = [3, 6, 7, 4, 5, 8].map((val)=>
{ 
 return val*val; 
}) 
</script> 
</body> 
</html>
Output: