How to Use The Array forEach() Method in JavaScript

forEach() is an iteration method, and it is mainly used for the serial execution of functionality against a list of elements.

Array forEach() is a method included in the Array.prototype property. It was introduced in ECMAScript 5 (ES5), and is supported in all modern browsers.

Basic forEach() usage example

The following code demonstrates how to print all of the items in an array using forEach()

const arr = [1, 'two',];
arr.forEach(item => console.log(item));

// Expected output:
// 1 
// two

Note: This example uses abbreviated syntax, a more complex version is exemplified below.

The forEach() method executes a function once for each item in the array. The method is called on the array object that you wish to manipulate, and the function to call is provided as an argument.

In the code above, console.log() is invoked for each element in the array.

forEach() vs. map(), filter() and reduce()

JavaScript provides a number of iteration methods – forEach(), map(), filter(), and reduce(). There are a couple critical differences between forEach() and the other functions. All of these methods iterate through an array in the same way, applying a function to each element in the array in-order. The difference arises when examining the return value of these methods. The map(), filter(), and reduce() methods are designed to produce a return value, whether that value is a single object or an array.

In contrast, the forEach() method returns undefined. This can cause negative effects in some cases, such as when trying to chain multiple method calls together. As such, the forEach() method is generally used to perform serial execution of a function against a list of inputs.

Syntax

Array.forEach(callback(item, index, arr), thisValue)

● callback is the function to invoke for each item, and takes the following parameters:

○ item is the current item. To improve readability, the item is generally named after the type of the object stored in the array (e.g. num for numbers, car for cars etc.)

○ index is the index of the current item in the array being processed

○ arr is the array being looped through. Since forEach() returns undefined, this can be useful if changes to the original array are required (the example below shows this in action)

● thisValue allows the this context to be changed. Read more about this here.

Below is some sample code that uses forEach() to iterate through a list.

const words = ['hello', 'bird', 'table', 'football', 'pipe', 'code'];
const capWords = words.forEach(capitalize);
 
function capitalize(word, index, arr) {
  arr[index] = word[0].toUpperCase() + word.substring(1);
}
console.log(words);

// Expected output:
// ["Hello", "Bird", "Table", "Football", "Pipe", "Code"]

Note: Since every item in the array stands for a word, we changed the name of the item parameter to “word”.

The forEach() method in the example above invokes the capitalize() function. This function can receive any array of words, and will operate similarly on the input. The method is applied to each element in the array in turn, capitalizing each word before updating the contents of the original array. This lets us easily apply a set of changes to an entire array!

Note: in the above example, the variable capWords is undefined after execution has completed.

Related Articles:

JavaScript – How to Use The Array map() Method

JavaScript – How to Use functions

JavaScript – How to Use the substring Method