The JavaScript map function generates a new array by applying a specified function to each element within the given typed array, resulting in an array that contains the outcomes of these function calls for all elements.
NOTE: map method does not change the actual array.
Syntax:
Example
array.map(function(value, index, arr), thisValue)
Parameters:
Value (Mandatory): The value associated with the present element.
Index (Optional): The position of the current element within the array.
arr(Optional) : The array map was called upon.
ThisValue(Optional): An optional parameter that can be supplied to the function, which will be utilized as its "this" context.
Return value:
A new array.
Browser Support:
| Chrome | Yes |
|---|---|
| Safari | Yes |
| Firefox | 1.5 |
| Opera | Yes |
Example 1
JavaScript map Method
Example
<script type="text/javascript">
// JavaScript to illustrate map() method
var input=[1,2,3];
var output=input.map(function(input)
{
return input*2;
});
document.write("Array after using map() method the output is" );
document.write("<br>");
document.write(output);
document.write("<br>");
document.write("Actual array still remain the same ");
document.write("<br>");
document.write(input);
// expected output: arr[Output:2,4,6]
</script>
Output:
Example 2
JavaScript map Method
Example
<script type="text/javascript">
// JavaScript to illustrate map() method
var pyVisualizer = ['Example','C','C++','RDBMS'];
//Determine the length of each name and save it in an array
var nameLengths =arr.map(function(value, index, array)
{
var len =value.length;
return len;
});
document.write("Array using map() method the output is" );
console.log(nameLengths);
document.write(nameLengths);
document.write("<br>")
document.write("Actual array still remain the same ");
document.write(pyVisualizer);
// expected output: arr[Output:10,1,3,5]
</script>
Output:
Output
10,1,3,5
