🔁 Loops (for, while, do-while)

Why Loops Matter

A loop executes a block of code repeatedly as long as a condition stays true. Anywhere you'd otherwise copy-paste the same statement — printing every item in a cart, summing a column of numbers, retrying a request — a loop does the job in a few lines and scales to any size of input.

💡 Analogy — an assembly line. A for loop is a line with a counter and a known number of items. A while loop keeps running as long as items keep arriving on the belt. A do…while loop always processes at least one item before checking whether to continue.

JavaScript offers several looping tools. This lesson focuses on the three classic ones, then introduces the array-oriented alternatives you'll reach for most in real code:

The for Loop

The for loop packs three things into one line: an initialization that runs once, a condition checked before every iteration, and an update that runs after every iteration. It's the natural choice when you know — or can compute — how many times to repeat.

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

// Walk an array by index
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}

function printReceipt(order) {
  let subtotal = 0;
  for (let i = 0; i < order.items.length; i++) {
    const item = order.items[i];
    const lineTotal = item.price * item.quantity;
    subtotal += lineTotal;
    console.log(`${item.name} x${item.quantity} — $${lineTotal.toFixed(2)}`);
  }
  const tax = subtotal * order.taxRate;
  console.log(`Total: $${(subtotal + tax).toFixed(2)}`);
  return subtotal + tax;
}

The while Loop

A while loop checks its condition before each iteration and runs as long as that condition is true. It shines when you don't know the number of iterations in advance — you loop until something happens.

// Roll a die until we get a 6
let roll = 0;
while (roll !== 6) {
  roll = Math.floor(Math.random() * 6) + 1;
  console.log(`Rolled ${roll}`);
}
console.log("Finally a 6!");

💡 Analogy — a bouncer. A while loop is a bouncer who checks the rule before letting anyone in. If the club is already full when their shift starts, nobody enters — the body may run zero times.

The do…while Loop

A do…while loop is the mirror image: it runs the body first, then checks the condition. This guarantees the body executes at least once — perfect for prompts and menus where you must ask before you can know whether to repeat.

let count = 10;
do {
  console.log(`count is ${count}`);
  count++;
} while (count < 10);
// Prints "count is 10" once, even though 10 < 10 is false

💡 Analogy — try before you buy. You always get the trial once (the body runs), and only then decide whether to keep going (check the condition). A plain while would demand the decision before you ever tried it.

break, continue & Nested Loops

Two statements steer a loop mid-flight. break exits the loop entirely; continue skips the rest of the current iteration and jumps to the next one.

// break: stop as soon as we find the value
const nums = [3, 7, 2, 9, 4];
let foundAt = -1;
for (let i = 0; i < nums.length; i++) {
  if (nums[i] === 9) { foundAt = i; break; }
}

// continue: skip even numbers, print the odds
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue;
  console.log(i); // 1 3 5 7 9
}

💡 Analogy — a TV remote. break is "stop" — you're done watching. continue is "skip to next episode" — you drop the current one but keep the series going.

Nested loops

A loop inside a loop walks two dimensions — rows and columns of a grid, for instance. A plain break only exits the inner loop; a labeled break can exit both at once.

const grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

search: for (let r = 0; r < grid.length; r++) {
  for (let c = 0; c < grid[r].length; c++) {
    if (grid[r][c] === 5) {
      console.log(`Found 5 at [${r}][${c}]`);
      break search; // exits BOTH loops
    }
  }
}

for…of and Array Methods

When you just need each value of an array (and not its index), for…of is cleaner and less error-prone than a counter loop — there's no i to get wrong.

const colors = ["red", "green", "blue"];
for (const color of colors) {
  console.log(color);
}

Better still, many loops are really doing one of three jobs: transforming each item, keeping some items, or combining items into one value. Modern JavaScript expresses those directly, so the intent is obvious at a glance:

const numbers = [1, 2, 3, 4, 5, 6];

// Hand-written loop
const evensDoubled = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) evensDoubled.push(numbers[i] * 2);
}

// Same result, intent-first
const evensDoubled2 = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2); // [4, 8, 12]

const sum = numbers.reduce((total, n) => total + n, 0); // 21

Pitfalls & Best Practices

for (let i = 0; i <= arr.length; i++) { /* BUG: overruns by one */ }
for (let i = 0; i <  arr.length; i++) { /* correct */ }

Hands-on Exercise

function fizzBuzz(n) {
  const out = [];
  for (let i = 1; i <= n; i++) {
    if (i % 15 === 0) out.push("FizzBuzz");
    else if (i % 3 === 0) out.push("Fizz");
    else if (i % 5 === 0) out.push("Buzz");
    else out.push(String(i));
  }
  return out;
}

console.log(fizzBuzz(15));
// ["1","2","Fizz","4","Buzz","Fizz","7","8","Fizz","Buzz","11","Fizz","13","14","FizzBuzz"]

const prices = [19.99, 4.5, 100, 8];
const total = prices.reduce((sum, p) => sum + p, 0);   // 132.49
const overTen = prices.filter(p => p > 10);            // [19.99, 100]

Summary & Quiz

📚 Further Reading

• MDN — Loops and iteration
• MDN — for statement
• MDN — Array.prototype.reduce()
• JavaScript.info — Loops: while and for

🚀 What's Next?

You now have both decisions and repetition — the two halves of control flow. Next we'll combine them into reusable shapes with Common Control Flow Patterns: guard clauses, state machines, filter-map-reduce, and clean error handling.