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
Continuing a loop in functional programming JavaScript.
In functional programming JavaScript, there's no direct equivalent to the continue statement used in traditional loops. However, you can achieve similar behavior using array methods like filter(), forEach(), and some().
The Problem with Traditional Continue
Traditional for loops use continue to skip iterations, but functional programming relies on array methods that don't support continue directly.
Method 1: Using filter() and forEach()
The most functional approach is to filter out unwanted elements first, then process the remaining items:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Functional Loop Continue</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
margin: 20px 0;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Continuing a loop in functional programming JavaScript</h1>
<div class="result"></div>
<button class="btn">Process Fruits (Skip Mango & Peach)</button>
<button class="clear-btn">Clear Results</button>
<script>
let resEle = document.querySelector(".result");
let fruitArr = ["apple", "mango", "peach", "papaya", "watermelon"];
document.querySelector(".btn").addEventListener("click", () => {
resEle.innerHTML = "<strong>Using filter() + forEach():</strong><br>";
fruitArr
.filter(fruit => fruit !== "mango" && fruit !== "peach")
.forEach(fruit => {
resEle.innerHTML += fruit + "<br>";
});
});
document.querySelector(".clear-btn").addEventListener("click", () => {
resEle.innerHTML = "";
});
</script>
</body>
</html>
Method 2: Using forEach() with Early Return
You can use early return within forEach() to skip processing certain items:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>forEach Early Return</title>
</head>
<body>
<div id="output"></div>
<script>
let fruitArr = ["apple", "mango", "peach", "papaya", "watermelon"];
let output = document.getElementById("output");
output.innerHTML = "<strong>Using forEach() with early return:</strong><br>";
fruitArr.forEach(fruit => {
// Skip mango and peach
if (fruit === "mango" || fruit === "peach") {
return; // Similar to 'continue'
}
output.innerHTML += fruit + "<br>";
});
</script>
</body>
</html>
Method 3: Using some() for More Control
The some() method can be used when you need more control over the iteration process:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using some() Method</title>
</head>
<body>
<div id="result"></div>
<script>
let fruitArr = ["apple", "mango", "peach", "papaya", "watermelon"];
let result = document.getElementById("result");
result.innerHTML = "<strong>Using some() method:</strong><br>";
fruitArr.some(function(fruit) {
if (fruit === "mango" || fruit === "peach") {
return false; // Continue to next iteration
}
result.innerHTML += fruit + "<br>";
return false; // Continue processing all items
});
</script>
</body>
</html>
Output
All methods will produce the same output, displaying only the fruits that aren't skipped:
apple papaya watermelon
Comparison
| Method | Readability | Performance | Functional Style |
|---|---|---|---|
filter() + forEach() |
Excellent | Good | Most functional |
forEach() + return |
Good | Best | Moderately functional |
some() |
Good | Good | Less conventional |
Conclusion
The filter() + forEach() approach is the most functional and readable way to "continue" loops in JavaScript. Use early return in forEach() for better performance when processing large arrays.
166 Views
