Loops: while & for

Why loops exist

A loop repeats a block of code while a condition says to keep going. That one idea saves you from copying the same line again and again. Instead of writing ten console.log calls, you write one call inside a loop and let JavaScript run it repeatedly.

This lesson covers two beginner loop families. Use while when the number of repeats is not known yet: keep stirring until the sauce thickens. Use for when the loop has a clear counter: run five laps on a track. do...while is the special case where the body must run at least once before the condition is checked.

You will step through real recorded code, change loop settings, sort scenarios by loop type, and practice with sums, FizzBuzz, off-by-one bugs, safety guards, and searches that stop early.

A while loop checks its condition before the body. If the condition is already false, the body runs zero times.

while (condition) {
  // repeat this body while condition is true
}

A do...while loop flips the order. It runs the body once, then checks the condition. That makes it useful for “try once, then maybe repeat” tasks, such as asking for input at least once.

do {
  // runs at least once
} while (condition);

In this replay, start both examples at 3. The while condition is false immediately, but do...while still increments once before checking.

1let thick = 3;Run2while (thick < 3) {3  thick++;4}5console.log("while: " + thick);6let taste = 3;7do {8  taste++;9} while (taste < 3);10console.log("do: " + taste);

A for loop places the loop’s bookkeeping in one header. That header has three parts separated by semicolons:

Read for (let i = 0; i < 3; i++) as: start the counter at 0; keep going while it is less than 3; after each lap, add 1. The body runs with i equal to 0, 1, and 2, then stops when the check sees 3.

1let total = 0;Run2for (let i = 0; i < 3; i++) {3  total += i;4}5console.log(total);

The timeline below shows the same anatomy without every value change. Use it to memorize the order: initializer once, condition, body, update, condition again.

1let total = 0;2for (let i = 1; i <= 3; i++) {3  total += i;4}5console.log(total);

const scores = [8, 10, 6];
let total = 0;
for (let i = 0; i < scores.length; i++) {
  total += scores[i];
}
console.log(total);

The next lesson, for...of & for...in, teaches the friendlier collection loops. For now, know that a plain for loop is still useful when you need the index itself.

break leaves the loop immediately. Think emergency exit. continue skips the rest of the current lap and jumps to the loop’s update/check step. Think skipping a song on a playlist: the playlist continues, but this song is over.

In the replay, odd numbers are skipped with continue. The first even multiple of 7 prints, then break stops the search.

1for (let n = 1; n <= 20; n++) {Run2  if (n % 2 === 1) continue;3  if (n % 7 === 0) {4    console.log(n);5    break;6  }7}

A label is a name followed by a colon before a statement. With loops, labels let break or continue point at an outer loop instead of only the nearest loop. They are legal JavaScript, but rare. Often, putting the nested loop in a function and using return is clearer.

1outer: for (let row = 1; row <= 3; row++) {Run2  for (let col = 1; col <= 3; col++) {3    if (row * col === 6) {4      console.log(row + "," + col);5      break outer;6    }7  }8}

continue outer also exists. It skips to the next lap of the labeled outer loop. Use it sparingly; if a label makes you pause to understand the control flow, a helper function may be kinder.

outer: for (let row = 1; row <= 3; row++) {
  for (let col = 1; col <= 3; col++) {
    if (col === 2) continue outer;
    console.log(row + "," + col);
  }
}

An infinite loop is a treadmill with no stop button: JavaScript keeps running the loop and cannot return to the rest of the page. In a browser, a long loop can freeze the tab because the page’s JavaScript runs on the main thread, as introduced in the Engines, runtimes & hosts lesson.

Never demonstrate an infinite loop by actually running one. Use a guard: a maximum number of steps, a timeout, or a carefully bounded input size. This playground shows two risky patterns safely.

1let i = 0;2let steps = 0;3while (i < 3) {4  steps++;5  // Bug: forgot i++ here.6  if (steps === 1000) {7    console.log("stopped by safety guard");8    break;9  }10}

Where you’ll use loops

Loops show up anywhere a program handles “many” things: attempts, rows, scores, characters, items in a cart, or search results. Here are practical patterns you will see often:

• Repeat a prompt or validation check until the answer is usable.
• Count from one number to another for a score, timer, or pagination control.
• Scan values until you find a match, then break.
• Skip values that do not matter with continue.
• Loop over simple arrays by index when the index matters.

One famous footnote: the older var keyword behaves differently in loops when closures remember the loop variable. That trap is covered in the Closures lesson and the later closures-in-loops topic. In modern beginner code, prefer let in loop headers.

Common misconceptions

Predict first, then run the code in your console or editor. Each task checks a small part of loop thinking.

let count = 0;
while (count < 3) {
  count++;
}
console.log(count);

let total = 0;
// write the loop here
console.log(total);

let total = 0;
for (let n = 1; n <= 100; n++) {
  total += n;
}
console.log(total);

for (let n = 1; n <= 15; n++) {
  // print Fizz, Buzz, FizzBuzz, or n
}

for (let n = 1; n <= 15; n++) {
  if (n % 15 === 0) {
    console.log("FizzBuzz");
  } else if (n % 3 === 0) {
    console.log("Fizz");
  } else if (n % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(n);
  }
}

for (let i = 0; i <= 3; i++) {
  console.log(i);
}

for (let i = 0; i < 3; i++) {
  console.log(i);
}

let tries = 0;
let ready = false;
while (!ready) {
  tries++;
  // add a guard that stops after 5 tries
}

let tries = 0;
let ready = false;
while (!ready) {
  tries++;
  if (tries === 5) {
    console.log("stopped by guard");
    break;
  }
}

const numbers = [4, 9, 0, -3, 8];
let firstNegative = null;
// search here
console.log(firstNegative);

const numbers = [4, 9, 0, -3, 8];
let firstNegative = null;
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] < 0) {
    firstNegative = numbers[i];
    break;
  }
}
console.log(firstNegative);

Read every explanation, even for choices you do not pick.

Key takeaways

• while checks before the body; do...while checks after the body.
• A for header shows initializer, condition, and update together.
• break exits a loop; continue skips the rest of one lap.
• Labels can aim break or continue at an outer loop, but they are rare.
• Every loop needs progress toward stopping, plus guards when the stopping condition may fail.

Up next: for...of & for...in.