for Loops

Loops are how programs do repetitive work without repetitive code. JavaScript has several loop types — each suited to different situations. In this lesson you will master the classic for loop, the modern for...of loop for iterating arrays and other iterables, and the for...in loop for enumerating object keys. You will also learn break and continue for controlling loop execution.

JavaScript Loop Types #

Classic for Loop Anatomy #

break and continue #

Basic Example #

// ── Classic for loop ──────────────────────────────────────────────────────
const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

for (let i = 0; i < fruits.length; i++) {
    console.log(`${i}: ${fruits[i]}`);
}
// 0: apple | 1: banana | 2: cherry | 3: date | 4: elderberry

// ── Reverse iteration ─────────────────────────────────────────────────────
for (let i = fruits.length - 1; i >= 0; i--) {
    console.log(fruits[i]);
}
// elderberry, date, cherry, banana, apple

// ── for...of — cleanest for array values ─────────────────────────────────
for (const fruit of fruits) {
    console.log(fruit.toUpperCase());
}

// ── for...of with entries() — index + value ───────────────────────────────
for (const [index, fruit] of fruits.entries()) {
    const label = index === 0 ? '(first)' : index === fruits.length - 1 ? '(last)' : '';
    console.log(`${index}: ${fruit} ${label}`);
}

// ── for...in — object keys ────────────────────────────────────────────────
const user = { name: 'Alice', age: 30, role: 'admin', isActive: true };

for (const key in user) {
    console.log(`${key}: ${user[key]}`);
}
// name: Alice | age: 30 | role: admin | isActive: true

// ── break — exit when found ───────────────────────────────────────────────
const numbers = [4, 8, 15, 16, 23, 42];
let target    = 15;
let foundAt   = -1;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === target) {
        foundAt = i;
        break;   // stop searching once found
    }
}
console.log(`Found ${target} at index ${foundAt}`);  // Found 15 at index 2

// ── continue — skip invalid items ─────────────────────────────────────────
const rawScores = [88, null, 72, undefined, 95, NaN, 60];
const validScores = [];

for (const score of rawScores) {
    if (score == null || !Number.isFinite(score)) {
        continue;   // skip nulls, undefined, NaN
    }
    validScores.push(score);
}
console.log(validScores);  // [88, 72, 95, 60]

// ── Nested loops — multiplication table ───────────────────────────────────
const SIZE = 4;
for (let row = 1; row <= SIZE; row++) {
    let line = '';
    for (let col = 1; col <= SIZE; col++) {
        line += String(row * col).padStart(4);
    }
    console.log(line);
}
//    1   2   3   4
//    2   4   6   8
//    3   6   9  12
//    4   8  12  16

// ── for...of on a string ──────────────────────────────────────────────────
const word = 'hello';
const chars = [];
for (const char of word) {
    chars.push(char.toUpperCase());
}
console.log(chars.join('-'));  // H-E-L-L-O

How It Works #

Step 1 — Classic for Loop Execution Order #

The initialiser (let i = 0) runs once. Then: check condition → run body → run update → check condition → run body → run update… until the condition is false. The condition is checked before each iteration, so if it is false from the start, the body never runs.

Step 2 — for…of Uses the Iterable Protocol #

for...of works on anything that implements the iterable protocol — arrays, strings, Sets, Maps, NodeLists, generator functions. It calls the object’s [Symbol.iterator]() method internally and steps through values one by one. You get the value directly — no index variable needed.

Step 3 — for…in Enumerates Prototype Chain #

for...in on an object yields all enumerable property keys, including inherited ones from the prototype chain. For plain objects created with { } this is usually fine. For arrays, avoid it — use for...of or array methods instead.

Step 4 — break Exits to the Outer Scope #

break inside a nested loop only exits the innermost loop. To break out of an outer loop from inside a nested loop, use a labelled break: outer: for (...) { inner: for (...) { break outer; } }. This is rarely needed but useful for matrix searches.

Step 5 — continue Jumps to the Next Iteration #

continue skips the rest of the current iteration’s body and moves directly to the update expression (in a classic for loop) or the next value (in for…of). Using continue to skip invalid items at the top of a loop body is a clean guard-clause equivalent for loops.

Real-World Example: Data Pipeline #

// data-pipeline.js

const orders = [
    { id: 'A1', status: 'completed', total: 49.99,  items: 3 },
    { id: 'A2', status: 'pending',   total: 12.50,  items: 1 },
    { id: 'A3', status: 'completed', total: 199.00, items: 7 },
    { id: 'A4', status: 'cancelled', total: 30.00,  items: 2 },
    { id: 'A5', status: 'completed', total: 89.95,  items: 4 },
    { id: 'A6', status: 'pending',   total: 0,      items: 0 },
];

// Aggregate completed orders
let completedRevenue = 0;
let completedCount   = 0;
let largestOrder     = null;

for (const order of orders) {
    // Skip non-completed and invalid orders
    if (order.status !== 'completed') continue;
    if (order.total <= 0)            continue;

    completedRevenue += order.total;
    completedCount++;

    // Track largest order
    if (!largestOrder || order.total > largestOrder.total) {
        largestOrder = order;
    }
}

console.log(`Completed orders: ${completedCount}`);
console.log(`Total revenue:    $${completedRevenue.toFixed(2)}`);
console.log(`Largest order:    ${largestOrder?.id} ($${largestOrder?.total})`);

// Build a report object from for...in
const statusCounts = {};
for (const order of orders) {
    const s = order.status;
    statusCounts[s] = (statusCounts[s] ?? 0) + 1;
}

console.log('
Status breakdown:');
for (const [status, count] of Object.entries(statusCounts)) {
    const bar = '#'.repeat(count * 3).padEnd(15);
    console.log(`  ${status.padEnd(10)} ${bar} ${count}`);
}

Common Mistakes #

Mistake 1 — Using for…in on an array #

❌ Wrong — for…in gives string keys and may include prototype properties:

const arr = ['a', 'b', 'c'];
for (const i in arr) {
    console.log(i);   // '0', '1', '2' — strings, not numbers
}

✅ Correct — use for…of for array values:

for (const item of arr) {
    console.log(item);  // 'a', 'b', 'c' — the actual values
}

Mistake 2 — Off-by-one error in classic for loop #

❌ Wrong — <= length goes one past the last index:

for (let i = 0; i <= arr.length; i++) {
    console.log(arr[i]);  // last iteration: arr[3] is undefined
}

✅ Correct — use strictly less than:

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);  // stops at index 2 for a 3-element array
}

Mistake 3 — Modifying an array while iterating it #

❌ Wrong — pushing to the array inside for…of causes unexpected extra iterations:

const items = [1, 2, 3];
for (const item of items) {
    items.push(item * 2);  // infinite loop — array keeps growing
}

✅ Correct — build a new array instead:

const doubled = [];
for (const item of items) {
    doubled.push(item * 2);  // safe — not modifying items while iterating
}

▶ Try It Yourself

Quick Reference #