JavaScriptConcepts

JavaScript Loops: A Complete Guide

1. Why Loops?

Loops let you repeat an action multiple times without duplicating code. They are essential for:

Iterating over arrays, objects, strings
Processing data (filtering, transforming, aggregating)
Running asynchronous tasks sequentially

2. Core Loop Types

2.1 `for` Loop (Classic Index Loop)

Best when you need the index or want fine-grained control.

const cars = ["BMW", "Mercedes", "Toyota", "Honda"];
for (let i = 0; i < cars.length; i++) {
  console.log(i, cars[i]);
}

Key points:

Initialization (let i = 0), condition (i < cars.length), update (i++)
Can break or continue
Good for performance-sensitive code

2.2 `while` Loop

Runs while the condition is true.

let count = 3;
while (count > 0) {
  console.log("Count:", count);
  count--;
}

Use when the number of iterations isn’t known ahead of time.

2.3 `do...while` Loop

Executes at least once before checking the condition.

let n = 0;
do {
  console.log("Executed once even if condition is false initially");
} while (n > 0);

2.4 `for...of` (Iterable Loop)

Great for arrays, strings, Maps, Sets.

const langs = ["JS", "Python", "Go"];
for (const lang of langs) {
  console.log(lang);
}

Benefits:

Cleaner than index loops
Works with any iterable (implements [Symbol.iterator])

2.5 `for...in` (Object Property Enumeration)

Iterates over enumerable keys (including inherited ones).

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

Avoid using for...in on arrays (order isn’t guaranteed). Combine with hasOwnProperty if needed:

for (const key in user) {
  if (Object.prototype.hasOwnProperty.call(user, key)) {
    console.log(key, user[key]);
  }
}

2.6 `Array.prototype.forEach`

Higher-order method for arrays.

const nums = [1, 2, 3];
nums.forEach((value, index) => console.log(index, value));

Limitations:

Can’t use break / continue
Doesn’t return a new array (use map if transforming)

2.7 `for await...of` (Async Iteration)

Used with async iterables or arrays of promises.

const urls = [
  fetch('https://jsonplaceholder.typicode.com/todos/1'),
  fetch('https://jsonplaceholder.typicode.com/todos/2')
];

(async () => {
  for await (const res of urls) {
    const data = await res.json();
    console.log(data.id);
  }
})();

3. Comparing Loop Types

4. Loop Control: `break`, `continue`, and Labels

for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // Skip 2
  if (i === 4) break;    // Stop loop
  console.log(i);
}

Labeled Break (Avoid unless necessary)

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
    console.log(i, j);
  }
}

5. Iterating Objects Safely

const person = { first: 'Ada', last: 'Lovelace' };
Object.keys(person).forEach(k => console.log(k, person[k]));
Object.entries(person).forEach(([k, v]) => console.log(k, v));

Prefer Object.keys/values/entries over for...in when you want only own properties.

6. Avoid Mutating While Iterating

Bad pattern:

const arr = [1,2,3,4];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) arr.splice(i, 1); // Skips elements
}

Better:

const filtered = arr.filter(x => x % 2 !== 0);

Or iterate from end:

for (let i = arr.length - 1; i >= 0; i--) {
  if (arr[i] % 2 === 0) arr.splice(i, 1);
}

7. Building Transformations Manually

const numbers = [1,2,3,4];
// map alternative
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}
// filter alternative
const evens = [];
for (const n of numbers) {
  if (n % 2 === 0) evens.push(n);
}
// reduce alternative (sum)
let sum = 0;
for (const n of numbers) sum += n;

8. Performance Notes

for with cached length is slightly faster in tight loops:

for (let i = 0, len = arr.length; i < len; i++) {}

Avoid heavy synchronous loops in the UI thread (they block rendering)
For large data, consider batching with setTimeout / requestIdleCallback

9. Async Pitfalls in Loops

Using `var` inside loops with async callbacks

for (var i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), 0); // 4,4,4
}

Fix with let (block scoping) or IIFE:

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

Sequential async with for...of:

async function process(ids) {
  for (const id of ids) {
    await doAsync(id); // waits each turn
  }
}

Parallel async:

await Promise.all(ids.map(doAsync));

10. When to Use What

11. Practical Examples

Summing Nested Arrays

const matrix = [[1,2],[3,4],[5,6]];
let total = 0;
for (const row of matrix) {
  for (const value of row) total += value;
}
console.log(total); // 21

Counting Frequencies

const letters = ['a','b','a','c','b','a'];
const freq = {};
for (const ch of letters) {
  freq[ch] = (freq[ch] || 0) + 1;
}
console.log(freq); // { a:3, b:2, c:1 }

Flatten One Level

const nested = [1,[2,3],[4,5]];
const flat = [];
for (const item of nested) {
  if (Array.isArray(item)) {
    for (const inner of item) flat.push(inner);
  } else flat.push(item);
}
console.log(flat); // [1,2,3,4,5]

12. Edge Cases

Mutating length during a loop affects iteration.
forEach skips holes in sparse arrays; for does not if index exists.
for...in order is not guaranteed for integer-like keys.
break in try/finally still executes finally.

13. Mini Cheatsheet

14. Practice Exercises

Reverse an array in-place using a for loop.
Write a loop to find the second largest number.
Use for...of to sum only even numbers in an array.
Implement a manual version of Array.prototype.filter using a loop.
Loop through a string and count vowels.

15. Summary

Mastering loops means knowing not just the syntax, but which tool fits which scenario. Start with readable constructs (for...of, array methods) and drop to lower-level loops (for, while) when you need control or performance.

Happy looping!