Loops: while & for

Why loops exist

A loop runs the same block of code again and again. Each run is called a lap. Each time round, JavaScript checks a condition: a question whose answer is true or false. While the answer is true, the loop keeps going. When the answer is false, the loop stops.

Loops save you from copying code. To print ten lines, you don't write console.log ten times. You write it once, inside a loop, and the loop runs it ten times.

This lesson covers three kinds of loop:

• while checks the condition first. Use it when you don't know how many laps you need.
• for keeps a counter, like i, in one line at the top. Use it when you count laps.
• do...while runs the body once first, then checks. Use it when the work must happen at least once.

In this lesson you will step through real code, change loop settings, and sort tasks by loop type. You will also practice with sums, FizzBuzz, loops that run one lap too many, safety limits, and searches that stop early.

A while loop checks its condition before the body. The body is the code between the curly brackets { }. If the condition is already false at the start, the body runs zero times.

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

A do...while loop does it the other way round. It runs the body once, and then checks the condition. So the body always runs at least once. This is useful for "try once, then maybe try again" jobs, such as asking a user to type something.

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

Here is a small while loop that counts attempts. attempts starts at 0. The loop runs while attempts is less than 2, and each lap adds 1. After two laps, attempts is 2, the check gives false, and line 5 prints 2.

let attempts = 0;
while (attempts < 2) {
  attempts++;
}
console.log(attempts);

In this replay, both loops start at 3. The while check thick < 3 is false right away, so its body never runs. The do...while body still runs once and adds 1 before its first check.

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 puts everything that controls the loop in one line at the top, called the header. Most for loops use a counter: a variable that counts the laps, often called i. The header has three parts, split by semicolons. Read each row of the table as one part: its name, when it runs, and an example.

Read for (let i = 0; i < 3; i++) like this:

• Start the counter i at 0.
• Keep going while i is less than 3.
• After each lap, add 1 to i. That is what i++ means.

The body runs with i equal to 0, then 1, then 2. Then i becomes 3. The check 3 < 3 gives false, so the loop stops.

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

The timeline below shows the same order for a loop that adds 1, 2, and 3. Use it to learn the order by heart: the initializer once, then check, body, update, check again, and so on.

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);

Line 3 counts i from 0 to 2. Line 4 adds the score at index i to total. Line 6 prints 24, which is 8 + 10 + 6.

To count down, turn the header round. Start high, keep going while n is at least 1, and use n-- to take 1 away after each lap. This loop prints 3, 2, then 1. You might use it for a countdown, or to handle the newest item first.

for (let n = 3; n >= 1; n--) {
  console.log(n);
}

A string can be read by index too, because each character has a position. word.length is how many characters the string has, and word[i] reads the character at position i. This loop prints t, e, and a.

const word = "tea";
for (let i = 0; i < word.length; i++) {
  console.log(word[i]);
}

Use an index like this when you need the position, for example to change one item in a list. If you only need each value, the for...of loop is shorter. You'll learn it in the next lesson, for...of & for...in.

Two words let you change what a loop does, from inside its body:

• break leaves the loop right away. No more laps run.
• continue ends the current lap early. The loop goes on to its update and its check, and the next lap runs as normal.

In the replay, the loop counts n from 1 to 20. Odd numbers hit continue, so they skip the rest of their lap. The first even number that 7 divides evenly is 14. The loop prints 14, and then break ends 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}

Each row of this table is one of the two words: what it does, and when people use it.

A loop inside another loop is called a nested loop. Inside a nested loop, break and continue work on the nearest loop around them: the inner one.

A label is a name with a colon, written in front of a loop, like outer:. With a label, break outer leaves the outer loop instead of only the inner one. Labels are allowed in JavaScript, but you will rarely see them. Often it is clearer to put the nested loops in a function and use return to stop.

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 works. It skips the rest of the inner loop and goes straight to the next lap of the outer loop. In this code, when col is 2, line 3 jumps to the next row. So only column 1 of each row prints. Use labels only when you must; if one makes the code hard to follow, a small function is easier to read.

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 loop whose condition never becomes false, so it never stops. While it runs, JavaScript can't do anything else. In a browser, the page freezes: it can't redraw or answer clicks. That is because a page's JavaScript runs one thing at a time, on the main thread. You met the main thread in the Engines, runtimes & hosts lesson.

Never test an infinite loop by really running one. Add a guard instead: a second way out, such as a limit on the number of laps. The safety lab below shows two risky loops. Each one has a guard, so it stops.

When a loop looks stuck, ask these three questions, in this order:

1. Can the condition be true at the start?
2. Does the body change a value that the condition reads?
3. Is there a limit, or a break, that ends the loop?

If the answer to question 2 is no, the loop never gets closer to stopping.

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

You'll use a loop whenever a program handles many things of the same kind: tries, rows, scores, letters, items in a cart, or search results. Here are common jobs for a loop:

• Ask again, or check again, until the answer is usable.
• Count from one number to another, for a score, a timer, or page numbers.
• Look through values until you find a match, then break.
• Skip values you don't need with continue.
• Go through a short list by index when you need each position.

One warning for later: the older keyword var behaves differently from let in loops. The difference shows up when a function remembers the loop variable. The Closures lesson explains it. For now, use let in your loop headers.

Common misconceptions

Guess the answer first. Then run the code in your console or editor to check. Each task practices one small part of loops.

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 the choices you didn't pick.

Key takeaways

• while checks before the body, so it can run zero times. do...while checks after the body, so it runs at least once.
• A for header holds three parts: the initializer runs once, the condition runs before each lap, and the update runs after each lap.
• break leaves the loop. continue ends only the current lap.
• A label, like outer:, lets break or continue work on an outer loop. You will rarely need one.
• Every loop must change something each lap, so it gets closer to stopping. Add a guard when you can't be sure it will stop.

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