JavaScript Loops: Repeating Code with for, while, and Other Loops

1️⃣ The for Loop — When You Know How Many Times

Theforloop is the workhorse — the most-used loop in JavaScript. Use it when you know (or can calculate)how many repetitionsyou need.

The Anatomy — Three Parts Inside One Parentheses

Output — watch the flow:

Flexible Counting

The counter is yours to control — count down, skip numbers, whatever you need:

The Classic Combo: for Loop + Array

Looping through arrays by index is the most common real-world pattern:

⚠️ Remember Lesson 5:arrays start at index0, so the loop runs from0tolength - 1.i < skills.length(not<=) is the safe pattern —<=would run one step too far and printundefined.

2️⃣ The while Loop — When You DON'T Know How Many Times

Awhileloop repeatsas long asits condition stays true — perfect when the endpoint is unpredictable:

Output:

for vs while — The Mental Model

You can't know in advance if the user needs 1 try or 50 — that's whywhileexists.

🚨 The Infinite Loop Trap

If the condition never becomes false, the loop runsforever— freezing the page:

Survival rules:

1. Everywhileloop mustchange somethingthat affects its condition
2. Double-check that the conditioncanbecome false
3. When testing new loops, start with small numbers — if it hangs,Ctrl+C(terminal) or close the tab (browser) and find the missing update

3️⃣ The do…while Loop — Run First, Ask Later

do…whileiswhile's optimistic sibling: italways runs the body at least once, then checks the condition:

Even if the user enters50on the first try, the prompthad to run onceto get that input — which is exactly whydo…whileexists.

while vs do…while

Usedo…whilefor:menus, input prompts, and "try at least once" logic. It's the least-used loop, but unbeatable for these cases.

⚠️ Syntax quirk:do…whileis the only loop that ends with a semicolon:} while (condition);

4️⃣ The for…of Loop — The Modern Array Walker ⭐

Introduced in ES6,for…ofloops directly over an array'svalues— no counter, no index, nolengthcheck:

Same output, zero bookkeeping. Read it as English:"for each skillofskills…"

It works on strings too (they're iterable — remember Lesson 14's spread!):

Usefor…ofwhen:you need eachitemin an array/string and don't care about positions. This is the modern default for array looping.

5️⃣ The for…in Loop — The Object Walker

for…inloops over an object'skeys(property names):

⚠️ for…of vs for…in — The Famous Interview Question

Golden rule:arrays →for…of; objects →for…in. Mixing them up is a classic beginner bug (and interview trap).

// Find the first even number, then STOP
let numbers =[1, 3, 7, 8, 9, 12];
for (let num of numbers) {
  if (num % 2 === 0) {
    console.log(`Found an even number: ${num} ✅`);
    break;
    // exit NOW — don't waste time on the rest
  }
}// Found an even number: 8 ✅   (9 and 12 never checked)

// Print only odd numbers — skip the evens
for (let i = 1;
i <= 6;
i++) {
  if (i % 2 === 0) {
    continue;
    // skip evens, jump to next iteration
  } console.log(i);
}// 1, 3, 5

// ✖️ Multiplication Table — nested loops in action!
let tableOf = 7;
let upTo = 10;
console.log(`=== Table of ${tableOf} ===`);
for (let i = 1;
i <= upTo;
i++) {
  let result = tableOf * i;
  console.log(`${tableOf} × ${i} = ${result}`);
}// Bonus: find the first result above 50, then stop
console.log("\n=== Bonus Hunt ===");
for (let i = 1;
i <= upTo;
i++) {
  let result = tableOf * i;
  if (result > 50) {
    console.log(`First result above 50: ${tableOf} × ${i} = ${result} 🎯`);
    break;
  }
}

=== Table of 7 ===7 × 1 = 77 × 2 = 14…7 × 10 = 70=== Bonus Hunt ===First result above 50: 7 × 8 = 56 🎯

Need to repeat code?
│
├─ Know how many times? ──YES──► for loop
│
├─ Repeat until something changes? ──YES──► while
│   └─ Must run at least once? ──YES──► do…while
│
├─ Walking through an array's values? ──YES──► for…of ⭐
│
└─ Walking through an object's keys? ──YES──► for…in