JavaScript Loops & Iteration

1. What is a Loop?

A loop runs a block of code repeatedly, either a fixed number of times or until a condition stops being true. Without loops, printing numbers 1 to 100 would take 100 lines of manual code. With a loop, it takes just 3 lines.

2. The Classic for Loop

Use the classic for loop when you know in advance how many times to repeat, or when you specifically need the numeric index.

for (let i = 1; i <= 3; i++) {
    console.log("Count:", i);
}

Count: 1
Count: 2
Count: 3

Execution Lifecycle:

1. let i = 1 runs once at the start.
2. Condition i <= 3 is checked. If false, the loop exits.
3. If true, the loop body executes.
4. Update i++ executes.
5. Jumps back to Step 2.

// 1. Counting backwards
for (let i = 5; i >= 1; i--) {
    console.log("Countdown:", i);
}

// 2. Stepping by 2 (Even numbers)
for (let i = 0; i <= 6; i += 2) {
    console.log("Even:", i);
}

// 3. Looping through an array by index
const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
    console.log(`Index ${i}: ${colors[i]}`);
}

Countdown: 5
Countdown: 4
Countdown: 3
Countdown: 2
Countdown: 1
Even: 0
Even: 2
Even: 4
Even: 6
Index 0: red
Index 1: green
Index 2: blue

3. while vs do...while Loops

Use while loops when the number of iterations is unknown in advance and depends on a dynamic runtime condition.

let balance = 1000;
let years = 0;
while (balance < 2000) {
    balance *= 1.07; // 7% growth
    years++;
}
console.log(`${years} years to double`);

let attempts = 0;
do {
    console.log("Attempt pass:", attempts);
    attempts++;
} while (attempts < 1);
// Executes once even if false!

4. for...of (Values) vs for...in (Keys)

A foundational distinction tested in nearly every JavaScript technical interview:

const fruits = ["Apple", "Banana"];
for (const fruit of fruits) {
    console.log(fruit);
}

const user = { name: "Alex", age: 24 };
for (const key in user) {
    console.log(key, "→", user[key]);
}

Modern Way to Loop Over Objects: Use Object.entries() with for...of to get own properties safely without prototype issues:

const settings = { theme: "dark", fontSize: 16 };
for (const [key, value] of Object.entries(settings)) {
    console.log(`${key} = ${value}`);
}

5. Controlling Loops: break, continue, and Labels

break immediately terminates the loop completely.
continue skips the rest of the current iteration and jumps directly to the next cycle.

for (let i = 1; i <= 6; i++) {
    if (i === 2) continue; // Skips number 2
    if (i === 5) break;    // Exits loop when reaching 5
    console.log("Number:", i);
}

Number: 1
Number: 3
Number: 4

Labeled Loops (Breaking Out of Nested Loops)

A standard break only exits the innermost loop. A labeled statement lets you break out of an outer parent loop directly from inside a nested loop:

outerLoop: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerLoop; // Exits the entire outer loop!
        }
        console.log(`i=${i}, j=${j}`);
    }
}

i=0, j=0
i=0, j=1
i=0, j=2
i=1, j=0

6. Common Loop Pitfalls & Solutions

Avoid these classic traps in coding rounds and production codebases:

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 0);
}
// Outputs: 3, 3, 3 (Shared!)

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 0);
}
// Outputs: 0, 1, 2 (Preserved!)

7. Decision Matrix: Which Loop Should I Use?

8. Loops Interview Deck

Test your understanding of loop execution order, off-by-one errors, for...of vs for...in, and loop control labels:

const fruits = ["apple", "banana"];
for (const item in fruits) {
    console.log(item);
}

let count = 10;
do {
    console.log("Ran once");
} while (count < 5);

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

const colors = ["red", "green", "blue"];
for (let i = 0; i <= colors.length; i++) {
    console.log(colors[i]);
}

outer: for (let i = 0; i < 2; i++) {
    for (let j = 0; j < 2; j++) {
        console.log(`i=${i} j=${j}`);
        break outer;
    }
}

9. Practice Challenges