# Counting with for

A for loop puts its start, its condition and its step in one line, so counting up, counting down or counting by any step reads at a glance, and break and continue let you stop early or skip a pass.

Novice · JavaScript · Updated November 1, 2026

## After this lesson you can

- Count up or down with a for loop's start, condition and step
- Stop a loop early with break and skip a pass with continue

## Key takeaways

- A `for` loop has three parts in its parentheses, separated by semicolons. The start runs once, the condition is checked before each pass, and the step runs after each pass.
- `for (let i = 1; i <= 5; i++)` counts 1 to 5. Start high and step with `i--` to count down, or use `i += 15` to count by 15s.
- Use `for` when you know how many times to repeat, and `while` when you don't.
- `break` ends the whole loop straight away. `continue` skips the rest of this pass and goes on with the next one.

Some jobs come with a number: print 5 receipt lines for a group of 5 riders, count down 10 seconds before a race, show a game's 12 levels. When you know how many times to repeat, the `for` loop is the one to reach for. It's the loop you'll write most often, in JavaScript and in almost every other language.

## Three parts in one line

Picture a race official counting laps: *start at lap 1; keep going while the lap is 5 or less; after each lap, add one.* A `for` loop has exactly those three parts, in one pair of parentheses, separated by semicolons:

```javascript
for (let lap = 1; lap <= 5; lap++) {
  console.log(`Lap ${lap}`);
}

console.log("Race over!");
```

```text
Lap 1
Lap 2
Lap 3
Lap 4
Lap 5
Race over!
```

- **The start**, `let lap = 1`, runs once, before anything else. It makes the **loop counter**: the variable that keeps count.
- **The condition**, `lap <= 5`, is checked before every pass, as in a `while` loop. When it's `false`, the loop ends.
- **The step**, `lap++`, runs after every pass. It moves the counter on.

Read the first line aloud as "for lap starting at 1, while lap is 5 or less, add one to lap". You'll often see the counter named `i` (short for *index*), as in `for (let i = 0; i < 10; i++)`. That's a habit, not a rule: a name that says what you're counting, like `lap` or `bike`, is easier to read.

## Using the counter

The counter is a variable like any other, so the loop's block can use it. A group of 4 riders turns up at Hilltop Bikes for a 2-hour ride on a weekday, at $12 an hour. The loop prints a line for each bike and adds up the total:

```javascript
const riders = 4;
const pricePerBike = 2 * 12;
let total = 0;

for (let bike = 1; bike <= riders; bike++) {
  console.log(`Bike ${bike}: $${pricePerBike}`);
  total += pricePerBike;
}

console.log(`Total: $${total}`);
```

```text
Bike 1: $24
Bike 2: $24
Bike 3: $24
Bike 4: $24
Total: $96
```

With a group of 12, change `riders` to 12, and the loop prints 12 lines. The code stays the same size whatever the group.

**Try it.** In `group-ride.js`, write the group loop and run it with `node group-ride.js`. Then make it a weekend ride at $15 an hour, for a group of 6.

## Counting down, and counting by steps

The three parts can count any way you like. Start high, keep going while the counter is above the end, and step with `--` to count down. Use `+=` to count by any step:

```javascript
let countdown = "";
for (let second = 5; second >= 1; second--) {
  countdown += `${second}... `;
}
console.log(`${countdown}Go!`);

let reminders = "";
for (let minutes = 15; minutes <= 60; minutes += 15) {
  reminders += `${minutes} min, `;
}
console.log(`Return reminders at: ${reminders}done.`);
```

```text
5... 4... 3... 2... 1... Go!
Return reminders at: 15 min, 30 min, 45 min, 60 min, done.
```

Each loop builds one line of text with `+=`, and prints it once at the end. The second counts by 15s: 15, 30, 45, 60, and then 75 fails `minutes <= 60`.

## for or while?

Anything a `for` loop does, a `while` loop can do too. Here's the lap counter as a `while` loop:

```javascript
let lap = 1;
while (lap <= 5) {
  console.log(`Lap ${lap}`);
  lap++;
}
```

```text
Lap 1
Lap 2
Lap 3
Lap 4
Lap 5
```

The same three parts are there, spread over three lines. A `for` loop puts them together, so you can see at a glance where it starts, where it ends and how it gets there, and you can't forget the step. Use `for` when you know how many times (5 laps, 4 riders); use `while` when you don't (until the rewards card reaches 100 points).

## break: stop early

Sometimes you find what you're looking for before the loop is done. **`break`** ends the whole loop straight away, and the program carries on after it. A rider has $50 to spend, at $12 an hour. How many hours can they ride? The loop tries 1 to 8 hours and stops at the first one that costs too much:

```javascript
const budget = 50;
let hoursYouCanAfford = 0;

for (let hours = 1; hours <= 8; hours++) {
  if (hours * 12 > budget) {
    break;
  }
  hoursYouCanAfford = hours;
}

console.log(`With $${budget}, you can ride for ${hoursYouCanAfford} hours.`);
```

```text
With $50, you can ride for 4 hours.
```

At 5 hours, the cost is $60, more than $50, so `break` ends the loop. The line after the `if` doesn't run for 5, and hours 6 to 8 are never tried.

## continue: skip this one

**`continue`** is smaller: it skips the rest of *this* pass and goes on with the next one. The loop itself keeps going. Hilltop's rack has bikes numbered 1 to 6, and bike 3 is in the repair shop today:

```javascript
for (let bike = 1; bike <= 6; bike++) {
  if (bike === 3) {
    continue;
  }
  console.log(`Bike ${bike} is ready to rent.`);
}
```

```text
Bike 1 is ready to rent.
Bike 2 is ready to rent.
Bike 4 is ready to rent.
Bike 5 is ready to rent.
Bike 6 is ready to rent.
```

For bike 3, `continue` skips the `console.log` line, and the loop goes straight on to bike 4. With `break` in its place, the loop would have stopped at 3, and only bikes 1 and 2 would be listed.

## Check yourself

2 questions to try on the lesson page.

## So what

A `for` loop is how a program does a job once for every rider, every second or every level, with the whole plan in one line, and `break` and `continue` handle the exceptions without extra variables.

## Key terms

- [for Loop](https://www.ask-codey.com/glossary/for-loop-javascript)
- [break](https://www.ask-codey.com/glossary/break-javascript)
- [continue](https://www.ask-codey.com/glossary/continue-javascript)
- Loop Counter

## Cheat sheets

- [Counting with for](https://www.ask-codey.com/cheat-sheets/javascript-loops-for-cheat-sheet)

## Related

- [Repeating with while](https://www.ask-codey.com/lessons/javascript-loops-while)

Source: https://www.ask-codey.com/lessons/javascript-loops-for