JavaScript forEach(): Call a Function for Each Item in an Array

The JavaScript forEach() method is used when we need to execute a function for each element of a specified array. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      const numbers = [12, 32, 43, 54];
      let sum = 0;

      numbers.forEach(findSum);

      function findSum(x)
      {
         sum += x;
      }

      document.getElementById("xyz").innerHTML = sum;
   </script>
   
</body>
</html>

Output

In the above example, the first JavaScript statement creates an array numbers containing four numeric elements. Then, it declares a variable sum and initializes it to zero. After that, the forEach() method is called on the numbers array with the argument findSum, which is the name of a function defined later in the code.

The forEach() method executes the findSum function once for each element in the numbers array, passing the current element as an argument. Inside the findSum function, the value of the current element is added to the sum variable.

After the forEach() method finishes iterating over the numbers array, the value of sum is displayed in the xyz paragraph element using the innerHTML property of the document.getElementById("xyz") statement.

Thus, the code finds the sum of all the elements in the numbers array and displays it in the HTML document.

JavaScript forEach() syntax

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

array.forEach(functionName(currentElementValue, currentElementIndex, currentElementArray), thisValue)

The functionName and currentElementValue are required.

Note: The functionName refers to a function to execute for every element of the array.

Note: The currentElementValue basically refers to a variable that will be used as an argument to the the function and that, of course, indicates to the current value or element of the specified array.

Note: The currentElementIndex refers to the index of the current element.

Note: The currentElementArray refers to the array of the current element.

Note: The thisValue refers to a value passed to the specified function functionName as its this value. The default value is undefined.

Advantages of the forEach() method in JavaScript

The use and comprehension of the forEach() method are simple. It streamlines the code required to loop through an array.
It is very adaptable and works with both conventional arrays and array-like objects.
In some circumstances, especially when the function being called is straightforward and doesn't have a lot of overhead, using the forEach() method can be faster than using a for loop.

Disadvantages of the forEach() method in JavaScript

A loop cannot be broken early using the forEach() method. Use a for loop or another method, such as some() or every(), if you need to stop iterating over the array based on a condition.
The callback function's lack of an index parameter in the forEach() method can be restrictive in some circumstances.
An empty array cannot be used with the forEach() method. Use a for loop or another technique if you need to iterate over an empty array.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!