How to use the JavaScript Array map() Method

The array.map() method was observed used in the JSON page search example, in the render function on my page describing the JSON Page Search.

The code below is the W3C example.

<p>Click the button to get a new array with the full name of each person in the array.</p>
<button onclick="myFunction()">Try it</button>

<p>New array: <span id="demo"></span></p>

<script>
var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

function getFullName(item) {
  var fullname = [item.firstname,item.lastname].join(" ");
  return fullname;
}

function myFunction() {
  document.getElementById("demo").innerHTML = persons.map(getFullName);
}
</script>

The array person is a JSON object.

The output from the code above is: New array: Malcom Reynolds,Kaylee Frye,Jayne Cobb

The search on the page_search JSON search page uses the map() method.

What W3C say:

• The map() method creates a new array with the results of calling a function for every array element.
• The map() method calls the provided function once for each element in an array, in order.
• Note: map() does not execute the function for array elements without values.