map() JavaScript Array Method – Explained with Examples
Whenever you use map()
on an array, the method does the following:
- It creates a new array.
- It populates the newly created array with its function argument's returned values.
- 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, inbestColorsList.map(func)
,bestColorsList
is the calling array. map()
is sometimes written asArray.prototype.map()
because it is a method of theArray
object'sprototype
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
});
() => {...}
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.
- You can rename the
currentItem
,index
, andarray
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"];
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
.
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.",
];
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:
map()
creates a new array. WhereasforEach()
does not create an array.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.