Skip to main content

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.

note
  • A calling array is an array on which you used forEach(). So, in bestColorsList.forEach(func), bestColorsList is the calling array.
  • forEach() is sometimes written as Array.prototype.forEach() because it is a method of the Array object's prototype 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
});
note

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

React Explained Clearly Book Now Available at Amazon

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 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 the callback 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
`;

Try it on StackBlitz

In the snippet above, we executed the forEach() method's function argument for each item inside the myName array.

note
  • In the example above, myName is the calling array.
  • The \n character in mergeName'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
`;

Try it on StackBlitz

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:

  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​

The forEach() method invokes its function argument once for each item of the calling array.