JavaScript For Loops: Syntax, Examples, Break and Continue

The Classic For Loop

When you know how many times you want to repeat something, the for loop is the tool. It packs the three parts of a counted loop — start, stop, step — into a single header line.

Five iterations, five lines of output. Reading the header:

• let i = 0 runs once, before the loop starts. It sets up the counter.
• i < 5 is checked before every iteration. If it's true, the body runs. If it's false, the loop ends.
• i++ runs after every iteration, just before the condition is checked again.

The three parts are separated by semicolons, not commas. All three are optional, but leaving them out is rare — you'd usually reach for while instead.

How the Pieces Fit Together

It helps to trace one loop by hand to lock in the order:

Step by step:

1. let i = 1 — the counter is created and set to 1.
2. Check i <= 3 — true, so run the body. Log 1.
3. Run i++ — i is now 2.
4. Check i <= 3 — true. Log 2.
5. Run i++ — i is now 3.
6. Check i <= 3 — true. Log 3.
7. Run i++ — i is now 4.
8. Check i <= 3 — false. Exit.

The update step runs after the body, not before. That's the part that trips people up.

Looping Over an Array by Index

The most common job for a for loop is walking an array. The counter doubles as the index:

A few things worth noticing:

• Arrays are zero-indexed. The first element is at index 0, the last at length - 1.
• The condition is i < fruits.length, not i <= fruits.length. Using <= would run one past the end and print undefined.
• i is declared with let, so it's scoped to the loop. Outside the loop, it doesn't exist.

If you only need the values and not the index, for...of is shorter and clearer — we'll cover it in its own doc.

break: Stop Early

break exits the loop immediately. Useful when you've found what you were looking for and don't need to keep going:

Once break runs, control jumps past the loop's closing brace. The update step doesn't run, the condition isn't rechecked — the loop is just over.

continue: Skip This Iteration

continue skips the rest of the current iteration and goes straight to the update step. The loop keeps running; it just doesn't finish the current pass.

Even numbers hit the continue and skip the console.log. Only the odd ones get printed. continue is handy when you want to filter out certain iterations without nesting the rest of the body inside an if.

Steps Other Than +1

The update step is just an expression. It doesn't have to be i++. Count by twos:

Count down:

Walk an array backwards — sometimes useful when you're removing items as you go:

Whatever you pick, the rule is the same: the condition and the update have to work together so the condition eventually becomes false. If they don't, the loop runs forever. for (let i = 0; i < 10; i--) is an infinite loop — i moves the wrong way.

Nested For Loops

You can put a for loop inside another. The inner loop runs to completion for every iteration of the outer loop.

Nine lines of output — three outer iterations, three inner ones each. Give each counter a meaningful name (row/col, i/j) rather than reusing the same variable.

One thing to watch: break and continue only affect the innermost loop. Breaking out of an inner loop doesn't stop the outer one. If you need that, set a flag and check it in the outer loop, or extract the nested work into a function and return from it.

Common Pitfalls

A few things that bite beginners:

Off-by-one errors. i <= arr.length iterates one step too far; i < arr.length - 1 stops one step too early. The standard form is i < arr.length.

Forgetting the update. If you leave off i++ (or the equivalent), the counter never changes and the loop runs forever:

for (let i = 0; i < 10; ) {
    console.log(i); // never ends
}

Using var for the counter. var is function-scoped, so the counter leaks out of the loop and can cause surprises in closures. Stick with let.

Modifying the array while iterating it. Removing items shifts indices around and you'll skip elements. If you need to remove items, loop backwards, or build a new array with filter.

When to Reach for Something Else

The classic for loop is always available, but JavaScript has shorter options for common cases:

• Iterating an array's values: for (const item of array) is cleaner.
• Transforming an array: array.map(fn) returns a new array.
• Filtering: array.filter(fn).
• Summing or reducing: array.reduce(fn, start).
• Just doing something for each element: array.forEach(fn).

Reach for the classic for when you actually need the index, need to skip or break mid-way, or need non-standard steps like counting down or by twos.

Next: While Loops

The for loop shines when you know the range up front. When you don't — when you want to keep going until some condition changes — while and do...while are a better fit. That's the next page.