JavaScript Array map() Method

The map() method used to iterate through the all items of array and push the results into a new array.

The map() method calls a callback function on every items of array.

The map() method takes two named arguments, the first one is required whereas the second one is optional.

Syntax

array.map(function(currentElement, index, array), thisValue);

OR
array.map(callback[,contextObject]);
function callback(currentElement,index,array){
  // 
}

//you can reference the contextObject inside the callback() function using the this keyword.

Parameter	Description
function(currentElement, index, array)	currentElement Required. The value of the current element that is being processed. index Optional. The array index of the current item. array Optional. The array belongs to current elements that is traversed.
thisValue	Optional. : value passed to the function used as "this", this parameter is blank then default value is "undefined" .

Version: ECMAScript 5

Example - multiplyByTwo

var numbersArary = [2,5,6];
var newarrayResult = numbersArary.map(multiplyByTwo)

function multiplyByTwo(number) {
  return number * 2;
} 

console.log(newarrayResult);
//Output : [4, 10, 12]

Example - 2

We can use map() method for display the records from array/object .

var persons = [
  { id: 10, name: 'Vishal Gupta', age:20},
  { id: 11, name: 'Harsendra Singh', age:25},
  { id: 12, name: 'Vipin Katiyar', age:28},
  { id: 13, name: 'Umesh Yadav', age:29}
];
var newArrayResult = persons.map((value,index) => (
console.log(value.id,index)
));

//Output :
10 0
11 1
12 2
13 3

Example - 3

If we need to ages only of persons .

var persons = [
  { id: 10, name: 'Vishal Gupta', age:20},
  { id: 11, name: 'Harsendra Singh', age:25},
  { id: 12, name: 'Vipin Katiyar', age:28},
  { id: 13, name: 'Umesh Yadav', age:29}
];
var personsAge = persons.map(function (person) {
  return person.age
});
console.log(personsAge);
//Output :  [20, 25, 28, 29]

Example - 4

We can use arrow functions (requires ES6 support, Babel or TypeScript) for the person's age .

var persons = [
  { id: 10, name: 'Vishal Gupta', age:20},
  { id: 11, name: 'Harsendra Singh', age:25},
  { id: 12, name: 'Vipin Katiyar', age:28},
  { id: 13, name: 'Umesh Yadav', age:29}
];
var personsAge = persons.map(person=> person.age);
console.log(personsAge);
//Output :  [20, 25, 28, 29]

Example - 5

We can use arrow functions (requires ES6 support, Babel or TypeScript) for the person's age .

var persons = [
  { id: 10, name: 'Vishal Gupta', age:20},
  { id: 11, name: 'Harsendra Singh', age:25},
  { id: 12, name: 'Vipin Katiyar', age:28},
  { id: 13, name: 'Umesh Yadav', age:29}
];
var personsAge = persons.map(person=> person.age);
console.log(personsAge);
//Output :  [20, 25, 28, 29]