JavaScript Loops: for, for...of and while

Repeat work with for, for...of and while, stop early with break, and avoid the infinite loop that freezes your tab. After this, you can pick the right loop for a list or a condition.

5 min JavaScript Programming Basics Web Development Testing and Debugging Beginner

Skip ahead: If you already know when to use for...of instead of a counting for loop, skip to "while: repeat until something changes".

A loop runs the same code more than once. Add up every item in a cart, check every field in a form, retry until something works. JavaScript has several loops. You need three of them to start: for...of for lists, for when you need a counter, and while when you don't know how many times it will run.

for...of: go through a list

This is the one you'll use most.

const prices = [250, 120, 75];
let total = 0;

for (const price of prices) {
  total = total + price;
}
console.log("Total:", total);

Total: 445

Read it as: for each price in prices, run the block. You don't deal with positions or counting. That's exactly why it's the safest choice for a list.

for: when you need the position or a count

The classic for loop has three parts: start, condition, step.

const items = ["rice", "eggs", "coffee"];

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

1. rice
2. eggs
3. coffee

let i = 0 starts the counter. i < items.length keeps going while it's true. i++ adds 1 after each round. Positions in arrays start at 0, so the first item is items[0] and the last is items[items.length - 1].

⚠ Warning: Use <, not <=, with .length. i <= items.length runs one extra time and reads items[3], which is undefined. That's the classic "off by one" bug. If you don't need the position, use for...of and the bug can't happen.

while: repeat until something changes

while checks a condition before every round. Use it when you don't know the number of rounds in advance.

let balance = 1000;
const withdrawal = 300;
let count = 0;

while (balance >= withdrawal) {
  balance = balance - withdrawal;
  count++;
}
console.log("Withdrawals:", count, "Left:", balance);

Withdrawals: 3 Left: 100

⚠ Warning: Something inside a while loop must eventually make the condition false. If it doesn't, the loop never ends, the browser tab freezes, and after a while Chrome asks if you want to stop the page. Before you run a while, point at the line that changes the condition. If you can't, don't run it.

Stopping early: break and continue

break leaves the loop immediately.
continue skips the rest of this round and goes to the next.

const orders = [500, 0, 1200, 300];

for (const amount of orders) {
  if (amount === 0) {
    continue;
  }
  if (amount > 1000) {
    console.log("Needs approval:", amount);
    break;
  }
  console.log("OK:", amount);
}

OK: 500
Needs approval: 1200

The 0 was skipped. The loop stopped at 1200, so 300 was never checked. That's correct if you only want the first large order. If you want all of them, remove the break.

Which loop?

A list, and you want each item: for...of.
You need the position, or you're counting: for.
You repeat until a condition changes, and you don't know how many times: while.

There's also for...in. It loops over the keys of an object, not the items of an array. Using it on an array is a common trap. The tutorial "for...of vs for...in" goes through it.

💡 Tip: Arrays also have methods like forEach, map and filter that loop for you. They're good, and you'll use them a lot in JavaScript Intermediate. Learn the plain loops first. When something goes wrong inside map, you'll understand what it's doing underneath.

Common mistakes

<= with .length (off by one).
A while that never changes its condition.
Declaring the total inside the loop, so it resets every round: put let total = 0 before the loop.
Changing an array (adding or removing items) while looping over it.

What happens if you skip this

You'll write the same line three times for three items, then thirty times for thirty. Or you'll copy a loop that works and freeze the tab with one that doesn't, without knowing why.

Try this: print only the even numbers from 1 to 20. Which loop did you pick, and could another one do it in fewer lines?

About