JavaScript Array map() Method

The method was observed used in the JSON page search example, in the render function.

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>

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 =;

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.


External Sources

JavaScript Array map() Method