• JavaScript Video Tutorials

JavaScript - Array forEach() Method

The JavaScript Array.forEach() method is used to iterate over the elements of an array, executing the provided callback function once for each and every element. This method does not executed for empty elements. It does not change or modify the original array.

Syntax

Following is the syntax of JavaScript Array forEach() method −

array.forEach(callbackFn (element, index, array), thisArg);

Parameters

This method accepts two parameters. The same is described below −

  • callbackfn − This is a callback function that will be called once for each element in the array. It further takes three arguments −
    • element − The current element being processed in the array.
    • index − The index of the current element being processed.
    • array − The array of the current element.
  • thisArg (optional) − It specifies a value passed to the function to be used as its this value.

Examples

Example 1

In the following example, we are using the JavaScript Array forEach() method, passing a callback function that takes one argument (element). This function pushes each element from the "animals" array into a new empty array.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const newArray = [];
      animals.forEach((element) => {
         newArray.push(element);
      });
      document.getElementById("demo").innerHTML = newArray;
   </script>
</body>
</html>

Output

As we can see the output, all the elements in the “animals” array are pushed into the new array.

Lion,Cheetah,Tiger,Elephant,Dinosaur

Example 2

Here, we are passing a callback function that takes two arguments (element, index). This function returns each element in the “animals” array along with its index.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      animals.forEach(function(element, index) {
         document.write(index + 1, ": ", element + "<br>");
      });
   </script>
</body>
</html>

After executing the program, all the array elements are printed along with their respective index numbers.

Output

1: Lion
2: Cheetah
3: Tiger
4: Elephant
5: Dinosaur

Example 3

Here, we are passing a callback function that takes all three arguments (element, index, array). This function returns each element in the “animals” array along with its index, and the entire array.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant"];
      animals.forEach(function(element, index, array) {
         document.write(`Index ${index}: ${element}, Array: ${array} <br>`);
      });
   </script>
</body>
</html>

After executing the above program prints each animal, its index, and the entire array.

Output

Index 0: Lion, Array: Lion,Cheetah,Tiger,Elephant
Index 1: Cheetah, Array: Lion,Cheetah,Tiger,Elephant
Index 2: Tiger, Array: Lion,Cheetah,Tiger,Elephant
Index 3: Elephant, Array: Lion,Cheetah,Tiger,Elephant
Advertisements