Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to stop forEach() method in JavaScript?

Javascript Web Development Front End Technology

In JavaScript, programmers can use the forEach() method to iterate through array elements. We can call a callback function, which we pass as a parameter of the forEach() method for every array element.

Sometimes, we may need to stop the forEach() loop after executing the callback function for some elements. We can use the 'break' keyword with a normal loop to stop it:

for(let i = 0; i 


However, we cannot use the 'break' keyword directly with the forEach() method. This code will throw a syntax error:



array.forEach(element => {
   // code
   if(some condition){
      break; // SyntaxError: Illegal break statement
   }
});




This tutorial will teach various approaches to stop or exit early from a forEach() loop in JavaScript.



Using the return keyword (Skip Current Iteration)



The return keyword stops execution of the current callback function and moves to the next iteration. In forEach(), it works like a continue statement - it skips the current element but continues with the remaining elements.



Syntax



array.forEach(function (element, index) {
   if (condition) {
      return; // Skip this iteration only
   }
});




Example



In this example, we skip printing elements when the index is greater than 2:



<html>
<body>
   <h2>Using the <i>return keyword</i> to skip iterations in forEach() loop.</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById('output');
      let array = ["string1", "string2", "string3", "string4", "string5"];
      
      array.forEach(function(element, index) {
         // Skip elements after index 2
         if (index > 2) {
            return; // Works like continue
         }
         output.innerHTML += "The array element is " + element + "<br/>";
      });
   </script>
</body>
</html>




The array element is string1
The array element is string2
The array element is string3




Important: The 'return' keyword doesn't break the forEach() method completely - it only skips the current iteration.



Stopping forEach() by Throwing an Exception



To completely stop a forEach() loop, we can use a try-catch statement. We throw an error when we want to stop execution, then catch it to handle the early exit.



Syntax



try {
   array.forEach((element) => {
      if (condition) {
         throw new Error("Break the loop");
      }
   });
} catch (error) {
   // Handle the break
}




Example



In this example, we stop the forEach() when we encounter a number type element:



<html>
<body>
   <h2>Using <i>try-catch statement</i> to stop forEach() loop completely.</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById('output');
      let array = ["Cpp", "Java", "JavaScript", 42, "Python", false];
      
      try {
         array.forEach((element) => {
            if (typeof element === "number") {
               throw new Error("Found number - stopping loop");
            }
            output.innerHTML += "Element: " + element + "<br/>";
         });
      } catch (error) {
         output.innerHTML += "<strong>Loop stopped: </strong>" + error.message;
      }
   </script>
</body>
</html>




Element: Cpp
Element: Java
Element: JavaScript
Loop stopped: Found number - stopping loop




Using Regular for-loop with break Keyword



The most straightforward solution is to replace forEach() with a regular for-loop and use the break keyword to stop execution when needed.



Syntax



for (let i = 0; i 


Example



In this example, we stop the loop when we find a value greater than 30:



<html>
<body>
   <h2>Using regular for-loop with break keyword to stop execution.</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById('output');
      let numbers = [10, 20, 30, 40, 50, 60, 70];
      
      output.innerHTML += "Processing numbers: ";
      for (let i = 0; i  30) {
            output.innerHTML += "<br/><strong>Stopped at: </strong>" + numbers[i];
            break;
         }
         output.innerHTML += numbers[i] + " ";
      }
   </script>
</body>
</html>




Processing numbers: 10 20 30 
Stopped at: 40




Comparison of Methods
Method Stops Completely? Performance Recommended?
return keyword No - skips iteration Good For skipping only
try-catch exception Yes Poor (overhead) No - not best practice
Regular for-loop Yes Excellent Yes - most practical

Alternative: Using array.some()

Another clean approach is using array.some(), which stops when the callback returns true:

<html>
<body>
   <h2>Using array.some() as forEach() alternative with early exit.</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById('output');
      let items = ["apple", "banana", "cherry", "date"];
      
      items.some((item, index) => {
         output.innerHTML += "Processing: " + item + "<br/>";
         if (item === "cherry") {
            output.innerHTML += "<strong>Found cherry - stopping!</strong>";
            return true; // Stops the some() method
         }
         return false; // Continue
      });
   </script>
</body>
</html>

Processing: apple
Processing: banana
Processing: cherry
Found cherry - stopping!

Conclusion

You cannot directly break a forEach() loop. For early exit, use a regular for-loop with break, or consider array.some() for cleaner code. Avoid using exceptions just to break loops as it's not a best practice.

Updated on: 2026-03-15T23:19:00+05:30

49K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements