Loop Control and Nesting

Objectives

By the end of this chapter, you should be able to:

• Stop a loop early with break
• Skip a single iteration with continue
• Explain the difference in what break and continue do to a loop
• Write and read a nested loop

💡 Why this matters: Not every loop should run to full completion, or touch every value the same way. Sometimes you want to stop the moment you find what you’re looking for, and sometimes you just want to skip one value and keep going. Nested loops are what let you work with grids, tables, and anything with two dimensions.

break: Stop the Loop Entirely

break exits a loop immediately, skipping any remaining iterations completely.

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}
// 1
// 2
// 3
// 4

The loop was set up to count from 1 to 10, but the moment i === 5, break runs and the loop stops immediately. It never gets to 5, 6, or any value after that. break is useful for stopping the moment you’ve found what you needed, no reason to keep looping once you have your answer.

continue: Skip This Iteration, Keep Looping

continue skips the rest of the current iteration only. The loop doesn’t stop, it just jumps straight to the next check of the condition (and, in a for loop, still runs the increment).

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}
// 1
// 2
// 3
// 4
// 6
// 7
// 8
// 9
// 10

This time every number from 1 to 10 is still checked. When i === 5, continue skips just the console.log(i) for that one iteration, and the loop moves right on to 6. Compare this directly to the break example above: same loop, same condition, but break cuts the whole loop short at 4, while continue only skips the single value 5 and keeps going all the way to 10. That’s the entire difference between the two: break ends the loop, continue ends only the current pass through it.

A common use for continue is skipping values that don’t apply, without abandoning the rest of the loop:

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}
// 1
// 3
// 5
// 7
// 9

i % 2 === 0 is true for even numbers, so continue skips logging them, leaving only the odd numbers printed.

Nested Loops

A loop can contain another loop. The inner loop runs to completion for every single iteration of the outer loop. This is exactly what you need for anything with two dimensions, like a grid or a table.

for (let row = 1; row <= 3; row++) {
  for (let col = 1; col <= 3; col++) {
    console.log(row, col);
  }
}
// 1 1
// 1 2
// 1 3
// 2 1
// 2 2
// 2 3
// 3 1
// 3 2
// 3 3

Trace it: the outer loop starts with row = 1. For that single value of row, the entire inner loop runs from col = 1 to col = 3, printing three lines. Only once the inner loop finishes does the outer loop move on to row = 2, and the inner loop runs all the way through again. That’s why you see three lines for each value of row, nine lines total for a 3 by 3 grid.

A multiplication table is a classic use of this pattern:

for (let row = 1; row <= 3; row++) {
  let line = "";
  for (let col = 1; col <= 3; col++) {
    line = line + row * col + " ";
  }
  console.log(line);
}
// 1 2 3 
// 2 4 6 
// 3 6 9 

For each row, the inner loop builds up one line of the table by multiplying row * col for every col, and appending it (plus a space) onto line with +. Once the inner loop finishes building that line, it gets logged, and the outer loop moves to the next row.

break and continue inside a nested loop only affect the innermost loop they’re written in, not the outer one:

for (let row = 1; row <= 3; row++) {
  for (let col = 1; col <= 3; col++) {
    if (col === 2) {
      break;
    }
    console.log(row, col);
  }
}
// 1 1
// 2 1
// 3 1

The break only stops the inner loop once col === 2. It doesn’t touch the outer loop at all, so row still counts all the way from 1 to 3, it’s just that for each row, the inner loop only ever gets to print col = 1 before breaking out.

Try It

1. Write a for loop from 1 to 20 that uses break to stop as soon as it reaches a number greater than 12.
2. Write a for loop from 1 to 10 that uses continue to skip any number divisible by 3, logging every other number.
3. Write a nested loop that prints a 4 by 4 grid of row col pairs, like the 3 by 3 example above but one row and column larger.

Recap

• break exits a loop immediately and skips everything left in it.
• continue skips only the current iteration and lets the loop keep going.
• A nested loop runs its entire inner loop once for every single iteration of the outer loop.
• break and continue inside nested loops only affect the loop they’re directly written in.

Next lesson: exercises that bring conditionals, loops, and loop control together.