When working with loops in JavaScript, it's common to want to skip certain iterations β whether to avoid processing specific values or just to make the logic cleaner.
But not all loop types work the same way when it comes to skipping!
In this blog, weβll explore:
- β
How to skip iterations using
for
loops - β Why
continue
doesnβt work inforEach
- π‘ Workarounds and alternatives
- π§ Which loop to choose based on your use case
π§ͺ 1. Skipping Iterations in a for
Loop (The Classic Way)
The continue
statement is your friend here.
for (let i = 0; i < 5; i++) { if (i === 2) { continue; // Skip when i is 2 } console.log(i); }
π§Ύ Output:
0 1 3 4
β Why it works:
The continue
statement tells the loop to skip the rest of the current iteration and move to the next one.
π« 2. Why continue
Doesnβt Work in forEach
[1, 2, 3].forEach((num) => { if (num === 2) { continue; // β SyntaxError! } console.log(num); });
Thatβs because forEach
uses a callback function, and continue
is only allowed inside actual loop constructs like for
, while
, or for...of
.
β
3. Skipping in forEach
with return
Instead of continue
, you can use return
to skip the current callback execution:
[1, 2, 3, 4].forEach((num) => { if (num === 3) return; // Skip 3 console.log(num); });
π§Ύ Output:
1 2 4
β Why it works:
Using return
exits the current callback function early β effectively skipping that iteration.
π 4. for...of
β The Flexible Alternative
Need more control (like both continue
and break
)? for...of
is a great middle ground:
const nums = [10, 20, 30, 40]; for (const num of nums) { if (num === 30) continue; console.log(num); }
π§Ύ Output:
10 20 40
You can also use break
here if needed β which you canβt do with forEach
.
π§ Which Loop Should You Use?
Use Case | Best Loop |
---|---|
Need break or continue ? | for , for...of |
Just iterating over items? | forEach (if no need to skip/break) |
Transforming data? | map , filter , reduce |
Working with async code? | for...of with await |
π Final Thoughts
Choosing the right loop isnβt just about preference β itβs about control. If you need to skip, short-circuit, or break, prefer for
or for...of
. Use forEach
only when you're sure you'll process every item and donβt need to interrupt the flow.
βοΈ Hope this helped clarify one of those subtle gotchas in JavaScript loops!
Top comments (3)
Great post Abhinav!
Just to add - for...in is another option
It iterates over object keys (or array indices),
You can use both break and continue with for...in loop.
Best used for objects:
`
const obj = {a: 1, b: 2, c: 3, d: 4};
for (const key in obj) {
if (key === 'b') continue; // Skip this iteration
if (key === 'd') break; // Exit the loop
console.log(key, obj[key]);
}
// Output: a 1, c 3
`
So for...in has the same flow control as regular for and for...of loops - unlike forEach which can't use break/continue.
Great breakdown of loop control in JavaScript! π I especially liked how you covered the differences between forEach, for...of, and for loops when it comes to skipping iterations. The workaround using return in forEach is a handy reminder, though it definitely makes me appreciate the flexibility of for and for...of more. Thanks for sharing thisβsuper useful for both beginners and seasoned devs brushing up on fundamentals! ππ‘
pretty cool seeing these differences all laid out tbh, you think picking the wrong loop messes up your code long-term or am i just overthinking it
Some comments may only be visible to logged-in visitors. Sign in to view all comments.