Skip to content

loops.md

Latest commit

 

History

History
370 lines (271 loc) · 8.67 KB

loops.md

File metadata and controls

370 lines (271 loc) · 8.67 KB

← Back to Home

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

Loop Use Case Supports break/continue Best For
for Indexed control Yes Arrays with index needs
while Unknown end condition Yes Event polling, dynamic termination
do...while Run at least once Yes Menu/input loops
for...of Iterables Yes Arrays, strings, Sets, Maps
for...in Enumerating object keys Yes Plain objects (with hasOwnProperty)
forEach Array iteration with side-effects No Simple per-item processing
for await...of Async iterables/promises Yes Sequential async handling

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

Need Pick
Index + control for
Unknown iteration count while
Run at least once do...while
Clean element iteration for...of
Own object keys Object.keys + forEach
Transform / filter / accumulate map / filter / reduce
Async sequential for await...of or for...of with await
Async parallel Promise.all

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

Goal Preferred Alternate
Iterate array values for...of for / forEach
Need index + value for arr.entries() + for...of
Iterate string chars for...of classic for
Object own keys Object.keys(obj) for...in + hasOwnProperty
Parallel async tasks Promise.all forEach + async (avoid)
Sequential async tasks for...of + await reduce chain

14. Practice Exercises

  1. Reverse an array in-place using a for loop.
  2. Write a loop to find the second largest number.
  3. Use for...of to sum only even numbers in an array.
  4. Implement a manual version of Array.prototype.filter using a loop.
  5. 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!