JavaScript While Loops

A for loop is for when you know how many times to repeat — five students, ten cups, a hundred lines. But sometimes you do not know the number in advance. A student keeps guessing a number until he gets it right. A login form keeps asking for the password until it is correct. A game keeps running until someone wins. For that, you use a while loop: it repeats while a condition is true, and stops the moment it becomes false.

Diagram — see how it fits together

Think of filling a bucket from a tap. You do not count the seconds in advance — you keep the tap open while the bucket is not full, and you close it when it is. A while loop is the same idea: keep going while the condition holds, stop when it does not.

Remember it like this: for counts, while waits — break escapes, continue skips.

while — repeat while the condition is true

A while loop has only one part in its brackets: the condition. Before every round, the computer checks it. True means run the block again; false means stop.

let cups = 0;
while (cups < 5) {
  cups = cups + 1;
  console.log("Cup " + cups + " poured");
}
// Cup 1 poured, Cup 2 poured, ... Cup 5 poured

Notice the difference from a for loop: the counter lives outside the loop, and the step (cups = cups + 1) lives inside the block. You manage the counter yourself. That is what makes while flexible — the condition can be anything, not just a count: "while the password is wrong", "while the player has lives left", "while the total is under 100".

do...while — run once, then check

A normal while loop checks the condition before the first round. If the condition is already false, the block never runs — not even once. A do...while loop flips that: it runs the block first, then checks. So the block always runs at least once, even if the condition is false from the start.

let number = 10;
do {
  console.log("Number is " + number);
  number = number + 1;
} while (number < 5);
// "Number is 10" — printed once, even though 10 is not less than 5

When is that useful? For anything you must do at least once: show a menu, ask for a password, roll the dice. You always ask once, and only then decide whether to ask again. Notice the semicolon after while (number < 5); — do...while is the only loop that ends with a semicolon.

break — escape the loop early

Sometimes you find what you are looking for before the loop would naturally end. break jumps straight out of the loop, skipping everything that is left — the remaining rounds and the rest of the current round.

let marks = [45, 82, 30, 91, 67];
let i = 0;
while (i < marks.length) {
  if (marks[i] === 30) {
    console.log("Found the fail mark at position " + i);
    break;
  }
  i++;
}
// "Found the fail mark at position 2" — the loop stops early

Without the break, the loop would have checked all five marks. With it, the search stops the moment it finds the answer. That is break's job: "I found it, I can stop now."

continue — skip this round, keep going

continue is the opposite of break. It does not leave the loop — it skips the rest of the current round and jumps to the next one. It is for "skip this one, but keep going".

let marks = [45, 82, 30, 91, 67];
for (let i = 0; i < marks.length; i++) {
  if (marks[i] < 40) {
    continue;
  }
  console.log(marks[i] + " passed");
}
// 45 passed, 82 passed, 91 passed, 67 passed — the 30 is skipped

The 30 fails the test, so continue skips its print line and moves on to the next mark. The loop itself keeps running. One warning: in a while loop, put the step before the continue — otherwise the counter never moves and the loop spins forever.

Common mistakes

• Forgetting the step inside a while loop — the condition never changes, the loop never ends, and the browser tab freezes.
• Putting continue before the step in a while loop — the counter never moves, so the loop spins forever. Put the step first.
• Using break when you meant continue — break leaves the loop completely, continue only skips one round.
• Forgetting the semicolon after while (...); in a do...while loop — it is the only loop that ends with one.
• Writing a condition that is never true in a plain while loop and expecting the block to run once — it runs zero times. That is what do...while is for.

Remember

• For counts, while waits — break escapes, continue skips.
• while checks before each round; do...while runs once first and checks after.
• Every while loop needs a step inside it that moves the condition towards false.
• break leaves the loop; continue skips one round and keeps going.

Example explained

• let target = 7; — the number the student has to guess, like a lucky-draw number.
• let guess = 0; — the current guess, starting at 0 so the loop is sure to run.
• while (guess !== target) — the loop keeps going while the guess is not 7. The moment it becomes 7, the loop stops.
• guess = guess + 1; — the step: each round the guess moves one closer to the target, so the loop is guaranteed to end.
• document.getElementById("result").innerHTML = ... — writes how many tries it took into the page when the button is clicked.