By the end of this lesson, you will be able to write a JavaScript for loop that counts through a range using an explicit counter and understand when to use it instead of other loops.
What it is
A for loop is a control-flow statement that repeats a block of code while a condition remains true. The classic JavaScript for loop has three parts inside parentheses: initialization, condition, and final expression. It is often used when you know how many times you want to repeat something, such as counting from 0 to 4.
Mental model: start a counter, check whether it is still in range, run the body, then update the counter. Related terms: loop body, counter variable, condition, increment, decrement, iteration.
Why it matters
- It lets you process items in an array by index.
- It gives precise control over the starting value, stopping point, and step size.
- It is useful for counting, generating sequences, and repeating calculations.
- It keeps loop control close to the loop header, making simple counting loops easy to read.
Syntax or steps
The smallest useful pattern is:
for (let i = 0; i < 5; i++) {
console.log(i);
}
Step by step:
- Initialization:
let i = 0creates a counter variable before the loop starts. - Condition:
i < 5is checked before each iteration. If it is false, the loop stops. - Body: the code inside the braces runs while the condition is true.
- Final expression:
i++updates the counter after each iteration.
Example
This example counts through a range and prints the sum of numbers from 1 to 5.
let total = 0;
for (let i = 1; i <= 5; i++) {
total += i;
console.log("i is", i, "total is", total);
}
console.log("Final total:", total);
Part by part:
let total = 0creates a variable outside the loop so its value survives after the loop ends.let i = 1starts the counter at 1 instead of 0.i <= 5keeps the loop running while i is less than or equal to 5.total += iadds the current counter value to the running total.i++increases i by 1 after each pass.
Common mistakes
- Using the wrong stopping condition. If you want five values starting at 0, use
i < 5, noti <= 5. - Forgetting to update the counter. If
i++is missing, the condition may stay true forever. - Declaring the counter with
varwhen you want block scope. Preferletso the counter is limited to the loop. - Assuming the loop body runs at least once. If the condition is false initially, the body never runs.
When to use it
Use a classic for loop when you need an explicit counter or index. Use for...of when you only need each value from an iterable. Use while when the stopping condition is not based on a simple counter.
| Loop | Best for | Example |
|---|---|---|
for | Counting by index or range | for (let i = 0; i < 5; i++) |
for...of | Reading values from an array | for (const item of items) |
while | Repeating until a condition changes | while (remaining > 0) |
Practice
Guided exercise: write a for loop that prints the even numbers from 2 to 10.
for (let i = 2; i <= 10; i += 2) {
console.log(i);
}
Expected output: 2, 4, 6, 8, 10.
Challenge: write a loop that counts down from 5 to 1 and prints each number. Hint: start at 5, continue while i >= 1, and use i--.
Quick check
Question: How many times does the body of for (let i = 0; i < 3; i++) run?
Answer: Three times, with i equal to 0, 1, and 2.
Summary
The for loop is JavaScript’s standard tool for repeating work with an explicit counter. Its three-part header lets you start, test, and update the loop in one place. Choose it when you need index-based or range-based repetition.