/ / How Does map() Work in JavaScript?

How Does map() Work in JavaScript?

How to use JavaScript's map method

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.

For instance, consider the code below:

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

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

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

The array you used map() on is called the calling array. So, in the example above, myName is the calling array.

Important stuff to know about the map() method

map() accepts two arguments: a callback function and a thisValue.

array.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.

map()’s function argument accepts three parameters: currentItem, index, and array.

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

Parameter 1: currentItem

The currentItem parameter represents the current array 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.
  • map() does not change the original array.

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.

If you do not provide a second argument, the computer will use undefined as the callback function’s this value.

Example of map() with three parameters and a thisValue

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

const myName = ["Oluwatobi", "Tobi", "Olu"];
const myFullName = myName.map(mergeName, "Mr.");

Try it on StackBlitz

If you run the snippet above, myFullName will contain:

[ 
  "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."
]

In summary

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

Get Helpful Resources in Your Inbox

A CodeSweetly Digest

Similar Posts