JavaScript Array forEach() Method

In this tutorial, we will learn about the JavaScript Array forEach() method with the help of example programs.

The forEach() method simply calls (or executes) the function once for each array element in order. It does not change the original array.

This method iterates over each element in an array and invokes a callback function for each element.

The callback function accepts three parameters that are:

• the value of current element in the array.
• the index of current element in the array.
• a reference to array itself.

Array forEach() method is different from map function because map function makes a copy of an original array based on what we return from the map function.

But forEach() method simply executes a function for each item. It does not care about what we are returning from the function.

Consider the following example code below.

<script>
  let numbers = [2, 4, 6, 8, 10];
// Create a function to compute square of each number.
   function computeSquare(element) {
      document.write(element * element, "<br>");
    }
// This statement will call forEach() method on an array numbers and compute the square root of each element.
   numbers.forEach(computeSquare);
</script>

Output:
      4
      16
      36
      64
      100

Array.prototype.forEach() method was added in ES5 and is mostly used to iterate over elements of an array.

JavaScript Array forEach() Method

The general syntax of the forEach() method in JavaScript is as:

// Arrow function
 arr.forEach((element) => { /* ... */ })
 arr.forEach((element, index) => { /* ... */ })
 arr.forEach((element, index, array) => { /* ... */ })

// Callback function
 arr.forEach(callbackFn)
 arr.forEach(callbackFn, thisArg)

// Inline callback function
 arr.forEach(function(element) { /* ... */ })
 arr.forEach(function(element, index) { /* ... */ })
 arr.forEach(function(element, index, array){ /* ... */ })
 arr.forEach(function(element, index, array) { /* ... */ }, thisArg)

Here, arr is the name of an array on which forEach() method will invoke.

forEach() Parameters

The forEach() method may take three parameters that are as:

• callbackFn – The function to execute on each array element. It can be called with the following arguments:
  • element – The current element to be processed in the array.
  • index – The index of an element in the array.
  • array – The array on which forEach() method is called.
• thisArg – Value to use as this when executing the callback function. It is an optional and is undefined by default.

forEach() Return Value

This method returns undefined.

Printing Array Elements and its Index value

The following code shows an example that logs a line for every element in an array.

Example 1:

<script>
  let fruits = ["Apple", "Banana", "Orange", "Mango", "Guava"];
// Create a function to print each array element and its index value.
  function printElement(element, index) {
     document.write("Array element: " +element, ", ", "Value of index: " +index, "<br>");
   }
// This statement will call forEach() method on an array fruits and print each element and its index value.
   fruits.forEach(printElement);
</script>

Output:
      Array element: Apple, Value of index: 0
      Array element: Banana, Value of index: 1
      Array element: Orange, Value of index: 2
      Array element: Mango, Value of index: 3
      Array element: Guava, Value of index: 4

In this example, the Array.forEach() iterates over each element in an array and logs a statement on the browser for each element in the array. Array iteration is as:

• First iteration: the value of element is “Apple”, and the value of index is 0.
• Second iteration: the value of element is “Banana” and the value of index is 1.
• Third iteration: the value of element is “Orange” and the value of index is 2.
• Fourth iteration: the value of element is “Mango” and the value of index is 3.
• Final iteration: the value of element is “Guava” and the value of index is 4.

Note: forEach() does not provide any way to end the iteration before all the elements have been passed to the function.

No operation for Array Element without Value

JavaScript Array.forEach() method does not execute callback function for array elements without values. In this case, it skips the array element, as it is empty. Let’s take an example of it.

Example 2:

<script>
  let colors = ["Red", "Green", , "Purple", "Blue"];
// Create a function to print each array element and its index value.
  function printElement(element, index) {
     document.write("Array element: " +element, ", ", "Value of index: " +index, "<br>");
   }
// This statement does not execute for element without value.
// In this case, it skips the second element as it is empty.
   colors.forEach(printElement);
</script>

Output:
       Array element: Red, Value of index: 0
       Array element: Green, Value of index: 1
       Array element: Purple, Value of index: 3
       Array element: Blue, Value of index: 4

Array forEach() Method with One Parameter

We can also create a function with only elements of an array. In this case, we need to ignore the additional arguments. Let’s take an example of it.

Example 3:

<script>
 let nums = [10, 20, 30, 40, 50];
 let sum = 0;
// Create a function with one parameter.
  function addition(element) {
     sum += element;
  }
  nums.forEach(addition);
  document.write("Sum of numbers: " +sum);
</script>

Output:
     Sum of numbers: 150

Let’s create the same program using arrow function and anonymous function.

Example 4: Using arrow function

<script>
  let nums = [10, 20, 30, 40, 50];
  let sum = 0;
  nums.forEach(element => { sum += element; });
  document.write("Sum of numbers: " +sum); // 150
</script>

Example 5: Using anonymous function

<script>
  let nums = [100, 200, 300, 400, 500];
  let sum = 0;
// Creating an anonymous function with one parameter.
  let fn = function(element) {
    sum += element;
  };
  nums.forEach(fn);
  document.write("Sum of numbers: " +sum);
</script>

Output:
      Sum of numbers: 1500

Copying Array Elements using Array.forEach() Method

Let’s create a JavaScript program to copy elements of an array into a new array using push() and forEach() methods.

Example 6:

<script>
  let cities = ["Dhanbad", "New York", "Mumbai", "London"];
  let copyCities = [ ];
  cities.forEach((element) => {
     copyCities.push(element);
   });
  document.write("New array: " +copyCities);
</script>

Output:
      New array: Dhanbad,New York,Mumbai,London

forEach() Method using thisArg Parameter

Let us take an example in which we will calculate the sum of numbers in an array using forEach() by passing this argument.

Example 7:

<script>
  function Counter() {
    this.sum = 0
  }
 Counter.prototype.add = function(array) {
 array.forEach(function countElement(element) {
   this.sum += element;
  }, this); // passing this argument in forEach() method.
 };
 let numbers = [20, 40, 60, 80, 100];
 const c = new Counter();
 c.add(numbers);
 document.write("Sum of numbers: " +c.sum);
</script>

Output:
     Sum of numbers: 300

As you can observe in the program, we have passed thisArg as this inside the definition of the add() method of the Counter object.

In this tutorial, you learned Array.forEach() method in JavaScript with many important example programs. Hope that you will have understood the basic concept of forEach() method and practiced all the example programs.
Thanks for reading!!!