JavaScript Array map() Method

JavaScript Array map() method is used to create a new array by calling a function on every element of the array. This method is mainly used for transforming data in an array, such as performing calculations on array elements or extracting specific properties from an array of objects.

It does not modify the original array.

Syntax

array.map(function(currentValue, index, arr), thisValue)

Parameters

function(required): It is a function that is called on every element of the array.

currentValue(required): The current element being processed in the array.

index(optional): It is the current element’s index.

arr(optional): The array object to the current element belongs.

thisValue(optional): It is used to set the value of this inside the callback function.

Return value

Returns a new array with each element resulting from the callback function.

Visual RepresentationVisual Representation of JavaScript Array map() Method

Example 1: How to Use Array map() method

let numbers = [5, 10, 15, 20, 25];
let square = numbers.map(item => item * item);

console.log(square);

Output

[ 25, 100, 225, 400, 625 ]

Example 2: Using an array of objects

let gtu = [
  {enrollnumber: 18, name: 'Ankit'}, 
  {enrollnumber: 21, name: 'Krunal'},
  {enrollnumber: 22, name: 'Rushikesh'}
];

let mappedArrayObj = gtu.map(obj => { 
  let newObj = {};
  newObj[obj.enrollnumber] = obj.name;
  return newObj;
});

console.log(mappedArrayObj);

Output

[ { '18': 'Ankit' }, { '21': 'Krunal' }, { '22': 'Rushikesh' } ]

In this example, we have transformed the original array of gtu objects into a new array mappedArrayObj. Each object in the output array has a dynamic key (enrollnumber) that corresponds to a student’s name.

Example 3: Accessing an index of an array

let numbers = [5, 10, 15, 20, 25];

numbers.map((item, i) => console.log(i));

Now, you can access all the indexes of the current item being iterated.

Output

0
1
2
3
4

We can define the function separately, pass the value to that function, and get the result.

let numbers = [5, 10, 15, 20, 25];

let square = (x) => {
 return x*x;
}

let newArray = numbers.map((item, i) => square(item));

console.log(newArray);

Output

[ 25, 100, 225, 400, 625 ]

Example 4: Using non-array objects

const arrayLike = {
  length: 3,
  0: 5,
  1: 10,
  2: 15,
};

console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));

Output

[ 25, 100, 225 ]

Example 5: Using sparse arraysVisual Representation of Using map() on sparse arrays

let sparseArray = [5,10,,20,,]; 
let newArray = sparseArray.map(x => x * 2); 
console.log(newArray);

Output

[ 10, 20, <1 empty item>, 40, <1 empty item> ]

In the above example, the missing elements (or “holes”) in the sparse array are skipped when using the method, and the resulting array retains the same sparsity structure.

Example 6: Mapped array contains undefined

let originalArray = [5, 10, 15, 20, 25];

let newArray = originalArray.map(element => {
 if (element > 12) {
 return element;
 }
});

console.log(newArray);

Output

[ undefined, undefined, 15, 20, 25 ]

Browser Compatibility

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 1.5 and above
  • Opera 9.5 and above
  • Safari 3 and above

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.