JavaScript Loops Cheat Sheet 🔁

• Classic counter-based loop — most flexible option
• Consists of three parts: initialization, condition, increment
• Perfect when you know exactly how many times to loop
• Use break to exit early if needed
• Use continue to skip to the next iteration

// Basic counting from 0 to 4
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// Output: 0, 1, 2, 3, 4

// Exit early with break
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}
// Output: 0, 1, 2, 3, 4

// Skip iteration with continue
for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
// Output: 0, 1, 3, 4

• Runs while condition is true — checks before each iteration
• Best when you don't know the number of iterations in advance
• Condition is evaluated before the loop body runs
• Always ensure the condition eventually becomes false
• Be careful to avoid infinite loops

// Basic while loop
let n = 0;
while (n < 3) {
  console.log(n);
  n++;
}
// Output: 0, 1, 2

// Controlled infinite loop with break
let count = 0;
while (true) {
  console.log(count);
  count++;
  if (count === 3) break; // Always include an exit!
}
// Output: 0, 1, 2

• Runs at least once — checks condition after the loop body
• Useful when you need guaranteed first execution
• The loop body always executes before testing the condition
• Common for user input validation
• Less common than while but has specific use cases

// Basic do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);
// Output: 0, 1, 2

// Practical example: ensure one run
let userInput;
do {
  userInput = prompt("Enter 'yes' to continue:");
} while (userInput !== 'yes');
// Keeps asking until user types 'yes'

• Modern loop for arrays and iterables — cleanest syntax
• Works with arrays, strings, Maps, Sets, and more
• Gives you the value directly (not the index)
• Cannot access the index without additional work
• Best choice for simple array iteration
• More readable than traditional for loops

// Loop through array values
const nums = [10, 20, 30];
for (const n of nums) {
  console.log(n);
}
// Output: 10, 20, 30

// Works with strings too
for (const char of "Hi") {
  console.log(char);
}
// Output: H, i

// With array of objects
const users = [
  { name: 'Ada' },
  { name: 'Bob' }
];
for (const user of users) {
  console.log(user.name);
}
// Output: Ada, Bob

• Loops through object keys — made for objects
• Iterates over all enumerable properties
• Returns the property name (key), not the value
• Use bracket notation to access values: obj[key]
• Avoid using on arrays (use for...of instead)
• Order is not guaranteed in all JavaScript engines

// Loop through object properties
const user = { 
  name: 'Ada', 
  age: 30,
  role: 'developer'
};

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// Output:
// name: Ada
// age: 30
// role: developer

• Functional programming approach — cleaner for transformations
• forEach() — execute a function for each item (no return value)
• map() — transform each item and return a new array
• filter() — create new array with items that pass a test
• reduce() — combine all items into a single value
• These methods don't modify the original array (except forEach can if you mutate)
• More expressive and less error-prone than manual loops

// forEach - side effects only
[1, 2, 3].forEach(n => console.log(n));
// Output: 1, 2, 3

// map - transform to new array
const doubled = [1, 2, 3].map(n => n * 2);
// Result: [2, 4, 6]

// filter - keep only matching items
const evens = [1, 2, 3, 4].filter(n => n % 2 === 0);
// Result: [2, 4]

// reduce - combine into single value
const sum = [1, 2, 3].reduce((total, n) => total + n, 0);
// Result: 6

// Chaining methods
const result = [1, 2, 3, 4]
  .filter(n => n > 1)    // [2, 3, 4]
  .map(n => n * 2)       // [4, 6, 8]
  .reduce((a, b) => a + b, 0); // 18

• continue — skip the current iteration and move to the next
• break — exit the entire loop immediately
• Both work with for, while, and do...while loops
• Don't work inside forEach(), map(), etc. (use return instead)
• Use labels to break out of nested loops
• Helps avoid unnecessary iterations

// continue - skip iteration
for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // skip when i is 2
  console.log(i);
}
// Output: 0, 1, 3, 4

// break - exit loop
for (let i = 0; i < 5; i++) {
  if (i === 3) break; // stop when i is 3
  console.log(i);
}
// Output: 0, 1, 2

// Early exit from search
const numbers = [5, 10, 15, 20];
for (const num of numbers) {
  if (num === 15) {
    console.log('Found it!');
    break; // no need to continue
  }
}

• Loop inside another loop — for multidimensional data
• Each outer iteration runs the entire inner loop
• Be aware of performance (loops multiply)
• Useful for matrices, grids, and combinations
• Can use labeled break to exit multiple levels
• Consider if there's a simpler approach first

// Basic nested loop
for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`i=${i}, j=${j}`);
  }
}
// Output: i=1,j=1  i=1,j=2  i=1,j=3  i=2,j=1  i=2,j=2  i=2,j=3

// Labeled break - exit outer loop
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}`);
  }
}
// Output: 0,0  0,1  0,2  1,0

// Practical: 2D array
const grid = [
  [1, 2, 3],
  [4, 5, 6]
];
for (const row of grid) {
  for (const cell of row) {
    console.log(cell);
  }
}

• Prefer for...of for simple array iteration — cleanest syntax
• Use array methods (map, filter, reduce) for data transformations
• Avoid modifying arrays while looping over them (causes bugs)
• Cache array length in performance-critical for loops
• Use meaningful variable names (user not i when appropriate)
• Always ensure loops can exit — watch for infinite loops
• Choose the right tool — match the loop to your use case

// ❌ Bad: modifying array while looping
const items = [1, 2, 3, 4];
for (let i = 0; i < items.length; i++) {
  items.splice(i, 1); // causes skipping!
}

// ✅ Good: use filter instead
const items = [1, 2, 3, 4];
const filtered = items.filter(n => n > 2);

// ✅ Good: meaningful names
const users = ['Ada', 'Bob'];
for (const user of users) {
  console.log(user); // clear intent
}

// ✅ Good: right tool for the job
// Transform data? Use map
const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.1);

// Find one item? Use find
const user = users.find(u => u.id === 5);

// Check if all/some match? Use every/some
const allAdults = users.every(u => u.age >= 18);