JavaScript Looping Cheat Sheet

1. *`for` Loop* (Traditional Loop)

The classic loop that allows you to specify the initialization, condition, and increment expression.

Syntax:

for (let i = 0; i < 5; i++) {
  console.log(i); // Prints: 0, 1, 2, 3, 4
}

• Initialization: let i = 0
• Condition: i < 5
• Increment: i++

2. *`while` Loop*

Executes a block of code as long as a specified condition is true.

Syntax:

let i = 0;
while (i < 5) {
  console.log(i); // Prints: 0, 1, 2, 3, 4
  i++;
}

3. *`do...while` Loop*

Similar to the while loop but guarantees that the code block will be executed at least once.

Syntax:

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

• Note: The condition is evaluated after the code block is executed.

4. *`for...of` Loop* (Array/Iterable)

Used to iterate over the values of iterable objects (e.g., arrays, strings, sets).

Syntax:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Prints: 10, 20, 30
}

• Iterates over values of the iterable.

5. *`for...in` Loop* (Object Properties)

Used to iterate over the keys (or property names) of an object.

Syntax:

const person = { name: 'Alice', age: 25 };
for (const key in person) {
  console.log(key); // Prints: 'name', 'age'
  console.log(person[key]); // Prints: 'Alice', 25
}

• Iterates over keys or properties of an object.

6. *`forEach()` Method* (Array)

A method to iterate over arrays and execute a function for each element.

Syntax:

const arr = [1, 2, 3];
arr.forEach((value, index) => {
  console.log(`Index: ${index}, Value: ${value}`);
});
// Prints: "Index: 0, Value: 1", "Index: 1, Value: 2", "Index: 2, Value: 3"

• Note: Cannot be used with break, continue, or return.

7. *`map()` Method* (Array)

Used to create a new array populated with the results of calling a provided function on every element in the array.

Syntax:

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6]

• Note: Returns a new array, does not modify the original array.

8. *`filter()` Method* (Array)

Used to create a new array with all elements that pass the test implemented by the provided function.

Syntax:

const arr = [1, 2, 3, 4];
const evenNumbers = arr.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4]

• Note: Returns a new array containing the elements that pass the condition.

9. *`reduce()` Method* (Array)

Used to apply a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Syntax:

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

• Note: The second argument (0) is the initial value of the accumulator.

10. *`break` and `continue` Statements*

• break: Exits a loop entirely.
• continue: Skips the current iteration and proceeds with the next iteration.

`break` Example:

for (let i = 0; i < 5; i++) {
  if (i === 3) break; // Exits the loop when i is 3
  console.log(i); // Prints: 0, 1, 2
}

`continue` Example:

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

11. *`for...await` Loop* (Async Iteration)

Used with async iterables to loop over asynchronous values (e.g., streams, async generators).

Syntax:

async function fetchData() {
  const asyncIterable = [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)];
  
  for await (const value of asyncIterable) {
    console.log(value); // Prints: 1, 2, 3
  }
}
fetchData();