forEach() JavaScript Array Method – Explained with Examples
Whenever you use forEach() on an array, the method invokes its function argument once for each item of the calling array.
- A calling array is an array on which you used
forEach()
. So, inbestColorsList.forEach(func)
,bestColorsList
is the calling array. forEach()
is sometimes written asArray.prototype.forEach()
because it is a method of theArray
object'sprototype
property.
Syntax of the forEach()
Method
forEach()
accepts two arguments. Here is the syntax:
callingArray.forEach(callback, thisValue);
Argument 1: callback
A function is the first argument accepted by the forEach()
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 forEach()
's function argument accepts three parameters: currentItem
, index
, and an array
.
callingArray.forEach((currentItem, index, array) => {
// Code to run for 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
forEach()
'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. forEach()
does not change the original array. (Although you can do so with thecallback
argument.)
Argument 2: thisValue
A thisValue
is the second argument accepted by the forEach()
method. It is an optional argument representing the value you want to use as the function argument's this
value.
callingArray.forEach((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: forEach()
without a thisValue
Argument
Here is an example of the forEach()
method without a thisValue
argument:
const myName = ["Oluwatobi", "Tobi", "Olu"];
let myFullName = "";
function mergeName(item) {
myFullName += `${item} Sofela\n`;
}
myName.forEach(mergeName);
console.log(myFullName);
// The invocation above will return:
`Oluwatobi Sofela
Tobi Sofela
Olu Sofela
`;
In the snippet above, we executed the forEach()
method's function argument for each item inside the myName
array.
- In the example above,
myName
is the calling array. - The
\n
character inmergeName
's template literal string is called the new line character. - JavaScript's new line character (
\n
) helps create line breaks in strings.
Example 2: forEach()
with a thisValue
Argument
Here is an example of the forEach()
method with a thisValue
argument:
const myName = ["Oluwatobi", "Tobi", "Olu"];
let myFullName = "";
function mergeName(item, ind, arr) {
myFullName += `${ind + 1}) ${this} ${item} Sofela is part of ${arr}\n`;
}
myName.forEach(mergeName, "Mr.");
console.log(myFullName);
// The 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 executed the forEach()
method's function argument for each item inside the myName
array. We also passed "Mr."
as mergeName
's this
value.
forEach()
vs. map()
– What's the Difference?
JavaScript's forEach()
and map()
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
The forEach()
method invokes its function argument once for each item of the calling array.