Loading...

JavaScript While Loop

for packs start, condition, and update into one header. Sometimes you only know the rule “keep going while this is true” — and the counter changes inside the work itself. A while loop checks one condition up front, runs the body, then checks again. Same idea of repeating work; different shape on the page.

What does while do?

while runs its block again and again as long as the condition in parentheses stays true. There is no init or update slot in the header. You prepare variables before the loop, and you change them inside the body so the condition can eventually become false. When it does, the loop stops and the next statement after the loop runs.

while, for, and do...while at a glance

📊 Everyday loop shapes

Shape When it fits Condition check
while keep going while a rule holds; update lives in the body before each round
for you already know start, stop, and step before each round (three-part header)
do...while body must run at least once after each round

Most beginner while examples still use a small integer counter. The difference is placement: you write let i = 0 before the loop and i++ (or another change) inside the braces. If you never change what the condition reads, the loop may never end.

Simple while count

javascript 
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

Count with while

i starts at 0 before the loop. Each round prints i, then adds one. You see 0, 1, 2, 3, 4 — five rounds. The value 5 never prints because the condition fails first. Without i++ inside the body, i would stay 0 forever.

Read one full round slowly: check condition → run the body (including the update) → check again. That is why forgetting the update is the classic infinite-loop trap with while.

Log a clear step

javascript 
let n = 1;
while (n <= 3) {
console.log("step " + n);
n++;
}

Clearer labels from 1

Here the counter starts at 1 and the condition uses n <= 3, so you see step 1, step 2, step 3. Starting at 0 or 1 is a design choice — keep the condition matched to that choice, just like with for.

Sum with while

javascript 
let total = 0;
let k = 1;
while (k <= 4) {
total = total + k;
k++;
}
console.log(total);

Accumulate a total

total starts at 0. Each round adds the current k, then advances k. After 1+2+3+4, total is 10. The growing result lives outside the loop; the counter that drives the condition lives beside it.

Countdown with while

javascript 
let left = 3;
while (left > 0) {
console.log("left=" + left);
left--;
}
console.log("done");

Count down to a stop

Not every loop only goes up. This one prints left=3, left=2, left=1, then done. Decreasing the counter is still an honest update — anything that moves toward ending the loop is fine.

do...while once minimum

javascript 
let x = 0;
do {
console.log("tick " + x);
x++;
} while (x < 1);
console.log("after=" + x);

do...while runs the body first

do...while executes the body once, then checks the condition. Even if the condition would already be false for a normal while, the first round still happens. Here you see tick 0, then after=1. Use it when “try once, then maybe repeat” matches the story.

Show while results on the page

Run a short count with while, build a message, then write it into the page.

Page count with while

html 
<!DOCTYPE html>
<html>
<head>
<title>While — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
let i = 1;
while (i <= 4) {
msg = msg + i + " ";
i++;
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>

The page shows count=1 2 3 4. Change the upper bound, refresh, and read the new list. Prefer for when the three-part plan is obvious up front; prefer while when the stop rule is clearer as a single condition with updates in the body. Next lesson walks values with for...of and for...in.

Try it yourself

  1. Write a while that logs 0…4 with i < 5 and i++ in the body.
  2. Change it to log 1…5 with i <= 5.
  3. Sum 1…5 into total with while and log the result.
  4. Count down from 5 to 1, then log done.
  5. Write a do...while that prints one line even when the condition starts false.
  6. In the HTML demo, change only the upper bound, refresh, and read count=.

Common mistakes

  • Forgetting the body update so the condition never becomes false (infinite loop)
  • Off-by-one: i < 5 vs i <= 5 when you meant the other count
  • Choosing do...while when you truly want zero rounds possible
  • Putting the update in the wrong place or changing a different variable than the condition reads
  • Using a long while when a clear for header would be easier to read

Summary

  • while repeats a block while its condition stays true
  • Prepare variables before the loop; update them inside the body
  • Great for counting, summing, and counting down
  • do...while runs the body at least once, then checks
  • Prefer for when start/stop/step are obvious; prefer while for a single ongoing rule
  • Next: for...of and for...in — walking values and keys

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 24 of 25
Javascript Tutorial