JavaScript Array method: map()
[this page | pdf | back links]
The map() method (when applied to a JavaScript
array) creates
a new array consisting of elements which are the result of calling a function
on each element of the original array in turn.
It
has the following syntax with the following parameters. It returns a new
array. It does not execute the function if array element does not have a value
and it does not change the original array.
array.map(function(currentValue, index,
arr), thisValue)
|
Parameter
|
Required / Optional
|
Description
|
|
function(currentValue,
index, arr)
|
Required
|
A function to be run
for each element
|
|
thisValue
|
Optional
|
A value to be passed to
the function to be used as its ‘this’ value (if empty then thisValue
will be undefined
|
The function
arguments are:
|
Parameter
|
Required / Optional
|
Description
|
|
currentValue
|
Required
|
The value of the
current element
|
|
Index
|
Optional
|
The array index of the
current element
|
|
arr
|
Optional
|
The array object which
the current element belongs to
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,th,tr,td {border: 1px solid black; border-collapse: collapse;}
</style>
</head>
<body>
<table>
<tr>
<th>Example</th>
<th>Resulting value of <code>x</code></th>
</tr>
<tr>
<td><code id="Example"></code></td>
<td><code id="Result"></code></td>
</tr>
</table>
<script>
var h = [-1, 2, 3];
document.getElementById("Example").innerHTML =
'var h = [-1, 2, 3];<br>' +
'function square(x) {<br>' +
' return x * x;<br>' +
'}<br>' +
'var x = h.map(square);';
document.getElementById("Result").innerHTML = h.map(square);
function square(x) {
return x * x;
}
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodArrayMap() {
var h = [1, 2, 3]; return !!h.map;
} |
NAVIGATION LINKS
Contents | Prev | Next | JavaScript Arrays