JS for Loop Syntax: A Complete Guide for Beginners

The for loop is the most widely used loop in JavaScript. It packs the counter setup, the stop condition, and the step instruction into one compact header. Once you can read and write this header, you can repeat any block of code a precise number of times.

For Loop Syntax, Piece by Piece

Every for loop follows the same three-part pattern, no matter what it counts or how it steps. Learning to read this header first makes every for loop you meet afterward easy to follow.

The for loop header has three expressions inside parentheses, separated by semicolons:

javascript

for (initialization; condition; update) {
  // body runs once per iteration
}

That shape stays the same in every for loop. Here is the same pattern filled in with real values so you can see it run:

javascript

for (let i = 0; i < 5; i++) {
  console.log(`Iteration ${i}`);
}

The loop starts i at 0, keeps going while i is less than 5, and increases i by one after each pass, so it prints five lines before the condition fails. Output:

text

Iteration 0
Iteration 1
Iteration 2
Iteration 3
Iteration 4

Initialization: let i = 0

This runs once, before the first iteration. It is almost always a let declaration that creates the counter variable. The name i is a convention that stands for "index," and it is what most developers expect to see.

Condition: i < 5

This is checked before every iteration, including the first. If the condition is true, the body runs. If false, the loop exits immediately.

The condition means the loop runs while i is 0, 1, 2, 3, or 4, five iterations total. When i becomes 5, the comparison fails and the loop ends.

Update: i++

This runs after every iteration, right before the next condition check. It is shorthand for i = i + 1, and it increases the counter by 1 each time the body finishes.

Without this step, i would stay 0 forever and the loop would never stop.

The diagram shows the exact order: init runs once, then condition, body, update, condition, body, update, and so on until the condition fails.

Varying the Three Parts

The classic for loop counts up from 0, but you can change each part to fit different patterns.

Counting down

javascript

for (let i = 5; i > 0; i--) {
  console.log(i);
}
// Prints: 5, 4, 3, 2, 1

The initialization starts at 5, the condition checks that i stays above 0, and the update decrements with i--.

Stepping by more than one

javascript

for (let i = 0; i <= 10; i += 2) {
  console.log(i);
}
// Prints: 0, 2, 4, 6, 8, 10

i += 2 adds 2 each time instead of 1. This is useful for iterating over every other item or generating even numbers.

Starting from a different value

javascript

for (let i = 100; i <= 300; i += 100) {
  console.log(i);
}
// Prints: 100, 200, 300

The loop runs three times. The counter, step size, and stopping point are all under your control.

Variable Scope Inside a for Loop

A counter declared with let inside the for loop header is scoped to the loop. It is not accessible outside the loop body:

javascript

for (let i = 0; i < 3; i++) {
  console.log("Inside:", i);
}
// console.log(i); // ReferenceError: i is not defined

If you need to read the counter value after the loop finishes, declare it outside the loop instead of inside the header:

javascript

let i;
for (i = 0; i < 3; i++) {
  console.log(i);
}
console.log("After loop, i is:", i); // 3

The final value of i after the loop is 3, the first value that made the condition false.

Common For Loop Patterns

The count-up-from-zero pattern is by far the most common because JavaScript arrays use zero-based indexing. For more on that, see how to loop through arrays using for loops.

For Loop with Arrays

The most practical use of a for loop is walking through an array:

javascript

const fruits = ["apple", "banana", "cherry"];
 
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}

The condition i < fruits.length keeps the loop running for indices 0, 1, and 2, then stops before it can reach index 3. Output:

text

0: apple
1: banana
2: cherry

Notice the condition uses < (less than), not <= (less than or equal). An array of length 3 has indices 0, 1, and 2.

Using less-than-or-equal would try to access index 3, which is undefined. This off-by-one error is the single most common loop mistake:

javascript

// WRONG: tries to access fruits[3], which doesn't exist
for (let i = 0; i <= fruits.length; i++) {
  console.log(fruits[i]);
}

Always compare the index to the array length with less-than, never less-than-or-equal, when iterating with indices.

The for...of Alternative

When you only need the values and not the indices, the for...of loop is cleaner:

javascript

for (const fruit of fruits) {
  console.log(fruit);
}
// Prints: apple, banana, cherry

The classic for loop still wins when you need the index, need to skip items with continue, or need to exit early with break.

Avoiding Common Mistakes

Forgetting the semicolons. The three parts of the header must be separated by semicolons, not commas.

javascript

// WRONG
for (let i = 0, i < 10, i++) { }
 
// RIGHT
for (let i = 0; i < 10; i++) { }

Using const for the counter. The counter must be reassignable, since the update expression changes it on every single pass through the loop.

javascript

// WRONG: TypeError
for (const i = 0; i < 5; i++) { }
 
// RIGHT
for (let i = 0; i < 5; i++) { }

Off-by-one errors. Confusing less-than with less-than-or-equal is the classic loop bug.

For array iteration, use < array.length. For numbered lists starting at 1, use <= instead. The difference is one iteration, and it matters every time.

For more loop patterns and how they compare to while and do while, see the full loops overview.