JavaScript Array map() method
returns a new array populated with the results of calling a provided function on every element in the calling array

map() method returns a new array populated with the results of calling a provided function on every element in the calling array.

syntax

map(callbackFn) A function to execute for each element in the array ↴

function is called with the following arguments ↴

map(function(element, index, array), thisArg)

callback function allows access to each element, the index, and the original array itself.

thisArg (optional). Value to use as this when executing callbackFn. By default, it is undefined.

map() method returns a new array with each element being the result of the callback function.

map() method does not execute the function for empty elements.

map() method does not change the original array.

A sparse array remains sparse after map()

The indices of empty slots are still empty in the returned array, and the callback function won't be called on them.

map() method similar to iterating over an array using a for loop

const myArray = [1, 4, 9, 16];

for (let i = 0; i < myArray.length; i++) {

  myArray[i] = myArray[i] * 2;

} myArray returns ↴

[2, 8, 18, 32]

syntax 1 description
return new array populated with elements that pass a test provided by a callback function
myArray.map(callbackFn)
syntax 2 description
return new array populated with elements that pass a test provided by a function on every element in the players array
myArray.map(callbackFn)

// best football players of all time

const players = [

{ fName: "Diego", lName: "Maradona", shirtNum: 10 },

{ fName: "", lName: "Pelé", shirtNum: 10 },

{ fName: "Lionel", lName: "Messi", shirtNum: 10 },

{ fName: "Zinedine", lName: "Zidane", shirtNum: 5 },

{ fName: "Cristiano", lName: "Ronaldo", shirtNum: 7 },

{ fName: "Johan", lName: "Cruyff", shirtNum: 14 },

{ fName: "Franz", lName: "Beckenbauer", shirtNum: 5 },

]