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

Disadvantages of the forEach() method in JavaScript

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!