2.5 — while loops
Deciding was half the power. The other half: repeating without getting tired. A loop tells the machine “keep doing this while a condition holds” — and suddenly checking 10,000 items costs you three lines. The simplest loop is while: a circular road with a gate. We’ll also deliberately break it, freeze a hypothetical browser tab, and understand exactly why that happens.
let fuel = 3;
while (fuel > 0) {
console.log("Vroom! fuel: " + fuel);
fuel = fuel - 1;
}
console.log("Out of fuel.");The shape: a circular road. At the top, a gate — the condition, checked BEFORE every lap. In the loop body: some work, and crucially, something that CHANGES (fuel goes down). fuel starts at 3.
The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”
Vocabulary: each trip around is an iteration — “the loop iterates”. And because the gate is checked before each lap, a while loop can run zero times. If the condition is false on arrival, the body is never entered. Start our fuel at 0 and you get no Vrooms — straight to "Out of fuel.".
There is a rarer sibling: do…while. It checks the gate after the lap, so it guarantees at least one run. You will recognize it when you meet it; almost nobody writes it.
The frozen tab, precisely. The browser gives your JavaScript one thread. While your code holds that thread, the browser cannot repaint the page, respond to clicks, or run anything else. A tight infinite loop holds it forever, so browsers eventually show the “This page is slowing down your browser” dialog and offer to kill it. Real-world infinite loops are rarely a deleted line. Usually the condition seems to change but does not: the wrong variable gets updated, or a comparison coerces unexpectedly. Your lesson 1.9 alarm should ring.
Fun fact: you might expect browsers to just… detect infinite loops and stop them. They can’t — and it’s not laziness, it’s mathematics. Alan Turing proved in 1936 (before electronic computers existed!) that it’s impossible to write a program that reliably determines whether any given program will finish or loop forever. It’s called the Halting Problem, one of the most famous results in computer science. The browser’s humble “kill this page?” dialog is the practical answer to a provably unsolvable problem.
⌨️ the accumulator
Add up the numbers 1 through 5 and print the result — but the loop must do the adding, not you.
requirements:
- A loop must visit the numbers 1, 2, 3, 4, 5.
- The result is printed once, after the loop — and the number
15may not appear anywhere in your code. - Hint (a pattern worth owning): a “running total” variable that starts empty and grows a little on every lap. It needs a name —
total— and a starting value of 0.
when you press RUN, the console must show exactly:
✏️ Quick check 1
Fresh numbers — trace the gate lap by lap: how many times does the body run? Type the number.
let n = 12;
while (n > 0) {
n = n - 5;
}✏️ Quick check 2
A while loop’s condition is false the very first time it’s checked. How many times does the body run? Type the number.
✏️ Quick check 3
JavaScript runs your code on how many threads? Type the number — it explains every frozen tab.
🗣️ Now teach it back
Explain while loops to a friend with the circular-road picture: when is the gate checked, why can a loop run zero times, and what exactly makes a loop infinite (and the tab freeze)?
Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.