JS For Loop Syntax: A Complete Guide for Beginners

Every programming language needs a way to repeat operations. In JavaScript, the for loop is the most common tool for controlled repetition. It lets you run a block of code a specific number of times, count through ranges, walk through collections, and process data in sequence. Understanding for loop syntax is foundational because almost every JavaScript program, from simple scripts to complex applications, uses loops to process data.

This tutorial breaks down the three-part for loop syntax, shows you practical counter patterns, explains how break and continue control loop flow, covers nested loops for multi-dimensional problems, and highlights the off-by-one errors that trip up every beginner.

The Three-Part For Loop Syntax

Every for loop has three expressions inside its parentheses, separated by semicolons:

javascript

for (initialization; condition; update) {
  // code to repeat
}

Here is the most common pattern, counting from 0 to 4:

javascript

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// Output: 0, 1, 2, 3, 4

Step-by-step execution:

1. let i = 0 runs once. The counter starts at 0.
2. i < 5 is checked. Since 0 is less than 5, the body runs.
3. console.log(i) prints 0.
4. i++ increments i to 1.
5. i < 5 is checked again. 1 is less than 5, so the body runs.
6. This cycle repeats until i becomes 5.
7. 5 < 5 is false. The loop ends.

Counter Patterns

Counting Up from Zero

The standard pattern for processing a fixed number of items:

javascript

for (let i = 0; i < 10; i++) {
  console.log(`Item ${i}`);
}
// Item 0, Item 1, ... Item 9

Counting Up from One

When you need 1-based numbering (like displaying page numbers):

javascript

for (let i = 1; i <= 5; i++) {
  console.log(`Page ${i}`);
}
// Page 1, Page 2, Page 3, Page 4, Page 5

Counting Down

Reversing the direction. Useful for countdowns or processing items in reverse:

javascript

for (let i = 10; i > 0; i--) {
  console.log(i);
}
console.log("Liftoff!");
// 10, 9, 8, ... 1, Liftoff!

Counting by Steps

Incrementing by more than one:

javascript

// Count by 2s (even numbers)
for (let i = 0; i <= 20; i += 2) {
  console.log(i);
}
// 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20
 
// Count by 5s
for (let i = 0; i <= 100; i += 5) {
  console.log(i);
}
// 0, 5, 10, 15, ... 95, 100

Multiple Counters

You can initialize and update multiple variables using the comma operator:

javascript

for (let left = 0, right = 10; left < right; left++, right--) {
  console.log(`left: ${left}, right: ${right}`);
}
// left: 0, right: 10
// left: 1, right: 9
// left: 2, right: 8
// left: 3, right: 7
// left: 4, right: 6

Controlling Loop Flow with Break and Continue

Break: Exit the Loop Early

The break statement stops the loop immediately, skipping all remaining iterations:

javascript

const numbers = [3, 7, 2, 9, 4, 1, 8];
 
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 9) {
    console.log(`Found 9 at index ${i}`);
    break; // stop searching
  }
}
// Found 9 at index 3

Without break, the loop would continue checking every remaining element even after finding the target value. Use break when you only need the first match.

Continue: Skip to the Next Iteration

The continue statement skips the rest of the current iteration and jumps to the update expression:

javascript

for (let i = 0; i < 10; i++) {
  if (i % 3 === 0) {
    continue; // skip multiples of 3
  }
  console.log(i);
}
// 1, 2, 4, 5, 7, 8

Practical For Loop Examples

Summing Numbers

javascript

let total = 0;
 
for (let i = 1; i <= 100; i++) {
  total += i;
}
 
console.log(total); // 5050

Building a String

javascript

const word = "JavaScript";
let reversed = "";
 
for (let i = word.length - 1; i >= 0; i--) {
  reversed += word[i];
}
 
console.log(reversed); // "tpircSavaJ"

Finding the Maximum Value

javascript

const temperatures = [72, 68, 74, 81, 77, 69, 85, 73];
let max = temperatures[0];
 
for (let i = 1; i < temperatures.length; i++) {
  if (temperatures[i] > max) {
    max = temperatures[i];
  }
}
 
console.log(`Highest temperature: ${max}`); // 85

Generating HTML Elements

javascript

const items = ["Home", "About", "Blog", "Contact"];
let html = "<ul>\n";
 
for (let i = 0; i < items.length; i++) {
  html += `  <li>${items[i]}</li>\n`;
}
 
html += "</ul>";
console.log(html);
// <ul>
//   <li>Home</li>
//   <li>About</li>
//   <li>Blog</li>
//   <li>Contact</li>
// </ul>

Nested For Loops

A for loop inside another for loop. The inner loop runs completely for each iteration of the outer loop:

javascript

for (let row = 1; row <= 3; row++) {
  for (let col = 1; col <= 4; col++) {
    console.log(`Row ${row}, Col ${col}`);
  }
}
// Row 1, Col 1
// Row 1, Col 2
// Row 1, Col 3
// Row 1, Col 4
// Row 2, Col 1
// ... (12 total iterations)

Multiplication Table

javascript

for (let i = 1; i <= 5; i++) {
  let row = "";
  for (let j = 1; j <= 5; j++) {
    row += String(i * j).padStart(4);
  }
  console.log(row);
}
//    1   2   3   4   5
//    2   4   6   8  10
//    3   6   9  12  15
//    4   8  12  16  20
//    5  10  15  20  25

Breaking Out of Nested Loops with Labels

Labels let you break out of an outer loop from inside an inner loop:

javascript

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
 
let target = 5;
let found = false;
 
outerLoop:
for (let row = 0; row < matrix.length; row++) {
  for (let col = 0; col < matrix[row].length; col++) {
    if (matrix[row][col] === target) {
      console.log(`Found ${target} at [${row}][${col}]`);
      found = true;
      break outerLoop; // exits BOTH loops
    }
  }
}
// Found 5 at [1][1]

Optional Parts of the For Loop

Each of the three expressions in a for loop is optional. You can omit any combination:

javascript

// Omit initialization (variable declared outside)
let i = 0;
for (; i < 5; i++) {
  console.log(i);
}
 
// Omit update (increment inside the body)
for (let i = 0; i < 5;) {
  console.log(i);
  i++;
}
 
// Omit all three (infinite loop with manual break)
for (;;) {
  const input = getInput();
  if (input === "quit") break;
  process(input);
}

Common Off-by-One Errors

Off-by-one errors are the most frequent for loop bugs. They happen when the loop runs one time too many or one time too few.

javascript

const colors = ["red", "green", "blue"];
 
// BUG: <= instead of < goes past the last index
for (let i = 0; i <= colors.length; i++) {
  console.log(colors[i]);
}
// red, green, blue, undefined (oops!)
 
// CORRECT: < stops at the last valid index
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}
// red, green, blue

The key rule: when using zero-based indexing (arrays), use < with .length. When using 1-based counting (display numbers), use <= with the max value.

For Loop vs Other Loop Types

JavaScript has several loop types. Here is when to use each:

javascript

// for: when you know the count or need the index
for (let i = 0; i < 10; i++) { /* ... */ }
 
// for...of: when you need the value from an iterable
for (const item of items) { /* ... */ }
 
// for...in: when you need property names of an object
for (const key in object) { /* ... */ }
 
// while: when the number of iterations is unknown
while (condition) { /* ... */ }
 
// do...while: when you need at least one iteration
do { /* ... */ } while (condition);

Use the standard for loop when you need precise control over the counter, access to the current index, or when iterating a specific number of times. For iterating over arrays purely for their values, for...of is often cleaner.

Best Practices

Use let for loop variables. The let keyword creates block-scoped variables that do not leak outside the loop. Using var in a for loop is a common source of closure bugs.

Prefer < length over <= length - 1. The pattern i < array.length is the standard convention. It is shorter, clearer, and avoids the subtraction that invites off-by-one errors.

Cache the length for performance when needed. In hot loops over very large arrays, for (let i = 0, len = arr.length; i < len; i++) avoids re-reading .length each iteration. For normal-sized arrays, this optimization is unnecessary.

Name the counter meaningfully in nested loops. Use row and col instead of i and j when iterating a grid. Use userIndex and orderIndex instead of i and j when iterating users and their orders. Meaningful names prevent bugs where you accidentally use the wrong counter.

Keep loop bodies short. If the body of your for loop is longer than 10-15 lines, extract the body into a named function. This improves readability and makes the code easier to test.

Next Steps