Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to stop forEach() method in JavaScript?
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 < length; i++){
// code
if(some condition){
break;
}
}
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 < array.length; i++) {
if (condition) {
break; // Completely stops the loop
}
}
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 < numbers.length; i++) {
if (numbers[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.
49K+ Views
