> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript 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.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
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.
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
