JavaScript For Loop

For Loop Syntax

The for loop has three parts in its parentheses, separated by semicolons: initialization (let i = 0), condition (i < 10), and increment/update (i++). This compact syntax puts all loop control in one place, making the loop's behavior immediately clear. The three parts work together to control how many times the loop executes.

The initialization runs once before the loop starts, typically declaring and initializing a counter variable (let i = 0). This sets up the starting state for the loop. The variable declared here is scoped to the loop when using let or const, meaning it doesn't exist outside the loop body.

The condition is tested before each iteration. If true, the loop body executes; if false, the loop terminates and execution continues after the loop. The condition typically compares the counter to a limit (i < array.length). Be careful with loop conditions—off-by-one errors are common.

The increment statement runs after each iteration completes, typically incrementing the counter (i++). You can increment by any amount (i += 2 for every other element), decrement (i--), or perform any update expression. The increment ensures the loop eventually terminates by moving toward the exit condition.

All three parts of the for loop are technically optional, though omitting them is rare. for (;;) creates an infinite loop equivalent to while (true). You can initialize variables outside the loop, test conditions elsewhere, or update values in the loop body, but keeping all control in the for statement is clearest.

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

// Loop through array
const fruits = ["Apple", "Banana", "Orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

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

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

For...Of and For...In

The for...of loop, introduced in ES6, iterates directly over array values (or any iterable like strings, Maps, Sets). You get the actual values, not indices: for (const fruit of fruits) gives you "Apple", "Banana", etc. This is simpler and more readable than traditional for loops with index access when you just need the values.

The for...in loop iterates over object keys (property names). For objects, it's the standard way to loop: for (const key in obj) gives you each property name, which you can use to access values with obj[key]. for...in is specifically designed for objects and their enumerable properties.

When working with arrays, for...of is simpler and safer than for...in. for...of gives you values directly, while for...in gives you string indices ("0", "1", etc.) and can include inherited properties. Use for...of for arrays unless you specifically need indices.

A critical gotcha: for...in also iterates over inherited enumerable properties from the prototype chain, not just the object's own properties. To check if a property is the object's own, use hasOwnProperty(). This is why for...in can behave unexpectedly with arrays or objects that have prototypes.

General rule: use for...of for arrays and iterables when you want values, use for...in for objects when you want keys. For arrays with indices, traditional for loops or forEach are alternatives. Modern JavaScript heavily favors for...of for its clarity and safety, while for...in remains essential for object iteration.

// for...of (arrays)
const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}

// for...in (objects)
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// for...of with strings
const text = "Hello";

for (const char of text) {
  console.log(char); // H, e, l, l, o
}