Skip to main content

map() JavaScript Array Method – Explained with Examples

Whenever you use map() on an array, the method does the following:

  1. It creates a new array.
  2. It populates the newly created array with its function argument's returned values.
note
  • Any function you provide as map()'s argument will get called on each item in the calling array.
  • A calling array is an array on which you used map(). So, in bestColorsList.map(func), bestColorsList is the calling array.
  • map() is sometimes written as Array.prototype.map() because it is a method of the Array object's prototype property.

Syntax of the map() Method​

map() accepts two arguments: a callback function and a thisValue. Here is the syntax:

callingArray.map(callback, thisValue);

Argument 1: callback​

A function is the first argument accepted by the map() method. It is a required argument containing the code you want the computer to invoke for each item of the calling array.

Keep in mind that map()'s function argument accepts three parameters: currentItem, index, and an array.

callingArray.map((currentItem, index, array) => {
  // Code to run on each item of the calling array
});
Buy CSS Grid book
note

() => {...} is an arrow function shorthand for function () {...}.

Parameter 1: currentItem​

The currentItem parameter is required. It represents the current calling array's item the computer is currently processing.

Parameter 2: index​

The index parameter is optional. It represents the index number of the item the computer is currently processing.

Parameter 3: array​

The array parameter is also optional. It represents the calling array.

note
  • You can rename the currentItem, index, and array parameters to anything you prefer.
  • The computer will invoke map()'s function argument only once for each item inside the calling array. The invocation will be in the order of the array items from left to right.
  • map() does not change the original array. (Although you can do so with the callback argument.)

Argument 2: thisValue​

A thisValue is the second argument accepted by the map() method. It is an optional argument representing the value you want to use as the function argument's this value.

callingArray.map((currentItem, index, array) => {}, thisValue);

Suppose you do not provide a second argument. In that case, the computer will use undefined as the callback function's this value.

Example 1: map() without a thisValue Argument​

Here is an example of the map() method without a thisValue argument:

const myName = ["Oluwatobi", "Tobi", "Olu"];

function mergeName(item) {
  return item + " " + "Sofela";
}

console.log(myName.map(mergeName));

// The invocation above will return:
["Oluwatobi Sofela", "Tobi Sofela", "Olu Sofela"];

Try it on StackBlitz

In the snippet above, we used the map() method to connect myName with mergeName.

Therefore, the computer will create a new array and populate it with the values returned after invoking mergeName on each item inside myName.

note

In the example above, myName is the calling array.

Example 2: map() with a thisValue Argument​

Here is an example of the map() method with a thisValue argument:

const myName = ["Oluwatobi", "Tobi", "Olu"];

function mergeName(item, ind, arr) {
  return `${ind + 1}) ${this} ${item} Sofela is part of ${arr}.`;
}

const myFullName = myName.map(mergeName, "Mr.");
console.log(myFullName);

// The console.log invocation above will return:
[
  "1) Mr. Oluwatobi Sofela is part of Oluwatobi,Tobi,Olu.",
  "2) Mr. Tobi Sofela is part of Oluwatobi,Tobi,Olu.",
  "3) Mr. Olu Sofela is part of Oluwatobi,Tobi,Olu.",
];

Try it on StackBlitz

In the snippet above, we used the map() method to connect myName with mergeName. We also passed "Mr." as mergeName's this value.

Therefore, the computer will create a new array and populate it with the values returned after invoking mergeName on each item inside myName.

map() vs. forEach() – What's the Difference?​

JavaScript's map() and forEach() methods work similarly. The main differences between the two are:

  1. map() creates a new array. Whereas forEach() does not create an array.
  2. map() automatically puts its return values in its newly created array. However, forEach() does not automatically put values in an array.

Overview​

map() creates a new array that contains the result of invoking map()'s function argument on each item of the calling array.

Rakuten Kobo US