JavaScript Array forEach() Tutorial

In this section, we will learn what the forEach() method is and how to use it in JavaScript.

JavaScript Arrays forEach() Method

When we want to loop through the entire elements of an array and run a set of instructions for each one of them, we can use the `forEach()` method.

The work of `forEach()` method is more like creating a for loop for an array and run through all the elements in it. But using the `forEach()` this work becomes much concise.

Array forEach() Syntax:

array.forEach(function(currentValue, index, arr), thisValue)

Array forEach() Method Parameters:

The `forEach()` method takes a reference to a function and runs the function for each element in the target array.

The function that we pass to this method takes 3 arguments:

  • The first argument is the element in the array.
  • The second argument is the index of that element.
  • The third argument is a reference to the target array.

Other than the function, the `forEach()` method takes a second argument as well. This second argument, which is optional, is a reference to an object that will bind to the `this` keyword in the function that we passed as the first argument.

Array forEach() Method Return Value:

The return value of the forEach() method is `undefined`. This means no value returns from this method.

Example: iterate array in JavaScript

const arr = ["Apple","Amazon","Tesla","Microsoft"];

const final = arr.forEach((value)=>console.log(value));

console.log(final);

Output:

Apple

Amazon

Tesla

Microsoft

undefined

Example: foreach loop in JavaScript

const obj1 = {
   name: "John", 
   age: 1000
}
const obj2 = {
   name: "Omid",
   age: 29
}
const obj3 = {
   name : "Jack", 
   age :52
}
const arr = [obj1,obj2,obj3];
function eve(value, index, arr){
   console.log(value.name); 
}

arr.forEach(eve);

Output:

John

Omid

Jack

Break forEach JavaScript

There’s no built-in feature to stop a forEach() method from looping through all the elements of an array. So if no error occurs in the body of the forEach() method, it will loop through the entire elements.

But if it is necessary to stop the loop under a specific circumstance, we can use exceptions and basically throw one to stop the loop.

Note: in situations like this, it’s a good idea to surround the forEach() method in a try-catch block to handle the exception properly! Otherwise, the whole program might crash because of this.

Example: JavaScript forEach break

const obj1 = {
   name: "John", 
   age: 1000
}
const obj2 = {
   name: "Omid",
   age: 29
}
const obj3 = {
   name : "Jack", 
   age :52
}
const arr = [obj1,obj2,obj3];
function eve(value, index, arr){
   if (value.name =="Omid"){
      throw "The name is Omid";
   } else{
      console.log(value.name);
   }
}

try{
   arr.forEach(eve);
}catch (err){
   console.log("Error message if necessary... ");
}

Output:

John

Error message if necessary…

In this example, the forEach() method stopped the moment it encountered an object with the name “Omid”. Also, note that we’ve handled the exception by surrounding the forEach() method in a try-catch block to stop the program itself from crashing because of this thrown exception.

Leave a Reply