Loops & Iteration
Beginner · 19 min read · ▶ live playground · ✦ checkpoint
One line can print one score. A loop can print the whole countdown, scan every character in a code, or keep trying until a condition changes. JavaScript loops let you repeat a block on purpose, without copying the same statement again and again.
A loop is a statement that repeats a block of code, and an iteration is one trip through that block. Think of a loop like an instruction card that says, "do this step, then check whether we should do it again."
while repeats while the question stays true
A while loop repeats as long as its condition is truthy. JavaScript checks the condition first, runs the block, then comes back and checks again.
let countdown = 3;
while (countdown > 0) {
console.log(`Round starts in ${countdown}`);
countdown = countdown - 1;
}
console.log("Go!");→ Round starts in 3, Round starts in 2, Round starts in 1, then Go!.
That countdown = countdown - 1; line is not decoration. It is what moves the loop toward ending. If the condition never becomes falsy, the loop runs forever, and the browser has to stop your code.
A do...while loop runs the block once before it checks the condition. Use it when "do this at least once" is the honest shape of the job.
let updatesWaiting = 0;
do {
console.log("Refresh the status board.");
updatesWaiting = updatesWaiting - 1;
} while (updatesWaiting > 0);→ Refresh the status board. The board refreshes once even though there were no extra updates waiting.
Most beginner code uses while more often than do...while. Reach for do...while only when the first run should happen no matter what.
The classic for loop keeps the counter in one place
A classic for loop is a loop with three control parts in one line: setup, condition, and update. Those parts control when the loop starts, keeps going, and moves forward. It is best when you know the count or need an index.
const playerName = "Sol";
for (let clap = 1; clap <= 3; clap = clap + 1) {
console.log(`${playerName} clap ${clap}`);
}→ Sol clap 1, Sol clap 2, then Sol clap 3.
Read the first line like this:
let clap = 1starts the counter, a number that tracks the repeats.clap <= 3keeps looping while the counter is in range.clap = clap + 1moves the counter after each iteration.
The moving part belongs in the loop header, the first line that controls a for loop, which makes classic for loops easier to audit than a scattered while counter.
break and continue change the current loop
The break statement exits the nearest loop immediately. The continue statement skips the rest of the current iteration and jumps to the next check.
const lockerCode = "A-7Z";
let cleanedCode = "";
for (let index = 0; index < lockerCode.length; index = index + 1) {
const character = lockerCode[index];
if (character === "-") {
continue;
}
if (character === "Z") {
console.log("Found the stop marker.");
break;
}
cleanedCode = `${cleanedCode}${character}`;
}
console.log(cleanedCode);→ Found the stop marker., then A7. The dash is skipped, and the Z stops the loop.
Use these sparingly. break is clear when you found what you came for. continue is clear when one case should be skipped and the rest should keep going.
Try it — read values with for...of
A for...of loop repeats once for each value in something iterable, which means something JavaScript knows how to walk through value by value. Strings are iterable, so for...of gives you characters directly.
Here character is the value you actually wanted. No index math, no bracket lookup. You will use for...of constantly with arrays in Section 6; strings let you learn the shape today.
const inviteCode = "VIP";
for (const character of inviteCode) {
console.log(`Stamp: ${character}`);
}→ Stamp: V, Stamp: I, then Stamp: P.
Off-by-one errors start at the boundary
An off-by-one error is a loop bug where you run one time too many or one time too few. You already know the root cause from strings: indexes are steps from the start, so the first character is index 0, and length is the count, not the last valid index.
const badge = "ACE";
let stamped = "";
for (let index = 0; index < badge.length; index = index + 1) {
stamped = `${stamped}[${badge[index]}]`;
}
console.log(stamped);→ [A][C][E].
When you want values, prefer for...of. When you truly need positions, use the classic pattern: start at 0, stop before .length.
You now have all the Part I control tools: comparisons, conditionals, and loops. Next you put them together in the Console Game Pack, where your code will ask questions, choose paths, and repeat until the game is done.
Checkpoint
Answer all three to mark this lesson complete