For Loop

A for loop is a synchronous control flow statement that executes a block of code repeatedly as long as a specified condition evaluates to a truthy value. It consolidates the initialization, condition evaluation, and iteration update into a single line of syntax, providing deterministic control over the iteration lifecycle.

for (initialization; condition; afterthought) {
  // statement
}

Structural Components

The for loop header consists of three optional expressions separated by semicolons:

• initialization: An expression or variable declaration evaluated exactly once before the loop begins. Variables declared here with let or const are block-scoped to the loop, whereas variables declared with var are function-scoped or globally scoped. Note a critical JavaScript pitfall: if const is used to declare the loop variable and the afterthought attempts to mutate it (e.g., i++), JavaScript will throw a TypeError at the end of the first iteration.
• condition: An expression evaluated before each iteration. If it evaluates to a truthy value, the statement executes. If it evaluates to a falsy value, the loop terminates, and the JavaScript engine passes control to the first statement following the loop construct.
• afterthought: An expression evaluated at the end of each loop iteration, immediately following the execution of the statement. While conventionally used for updating the loop state (e.g., incrementing or decrementing a counter), it is not restricted to state mutations and can be any valid JavaScript expression, such as a function call or console.log().
• statement: A block statement (enclosed in {}) or a single statement that executes during each successful iteration.

Execution Flow

The JavaScript engine processes a for loop using the following sequence:

1. The initialization expression executes.
2. The condition expression is evaluated.
   • If falsy, the loop terminates.
   • If truthy, execution proceeds to step 3.
3. The statement (loop body) executes.
4. The afterthought expression executes.
5. Control flow returns to step 2.

Technical Nuances

Optional Expressions All three expressions in the loop header are optional. Omitting the condition expression defaults its evaluation to true, resulting in an infinite loop unless explicitly terminated via a break statement or return within the loop body.

let i = 0;
for (;;) {
  if (i >= 3) break;
  i++;
}

Lexical Scoping per Iteration When the initialization block uses the let keyword, JavaScript creates a distinct lexical environment for each iteration of the loop. The variable is not just scoped to the loop block as a whole; a new binding is created for every pass.

for (let i = 0; i < 3; i++) {
  // 'i' is a distinct variable binding in memory for iteration 0, 1, and 2
}

Conversely, using var creates a single binding for the entire loop lifecycle, which is hoisted to the nearest function or global scope, often leading to unintended mutations when closures or asynchronous callbacks are executed within the loop body.

Master JavaScript with Deep Grasping Methodology!

Learn More