Loops & Iteration: for, while & for...of

1. Simple Definition

Jab hume kisi code block ko bar-bar repeat karna hota hai (jaise 100 products ki list screen par render karna, ya database se aayi 50 emails bhejna), tab hum Loops use karte hain. Loops ek specific condition fulfill hone tak code ko automatically bar-bar run karte hain.

2. Real-Life Analogy

3. Why Do We Need It?

Bina loops ke agar aapko 100 bar "Hello" print karna ho, toh 100 lines ka code likhna padega. Loops se wahi kaam sirf 3 lines me ho jata hai.

4. Syntax & Loop Types

// 1. Classic for loop (Index based)
for (let i = 0; i < 5; i++) {
  console.log("Count:", i);
}

// 2. Modern for...of loop (Best for Arrays!)
const fruits = ["Apple", "Mango", "Banana"];
for (const fruit of fruits) {
  console.log("Fruit:", fruit);
}

// 3. while loop (Condition based)
let energy = 3;
while (energy > 0) {
  console.log("Working... Energy left:", energy);
  energy--;
}

// 4. for...in loop (For Object Keys)
const user = { name: "Amit", city: "Delhi" };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

5. Basic Example (break and continue)

for (let i = 1; i <= 6; i++) {
  if (i === 3) {
    console.log("Skipping 3! (continue)");
    continue; // Agle number par jump karega
  }
  if (i === 5) {
    console.log("Stopping loop at 5! (break)");
    break; // Loop ko turant terminate karega
  }
  console.log("Number:", i);
}

6. Output / Expected Result

7. Code Explanation

• for (initialization; condition; update): 3 steps ka standard loop cycle.
• for...of: ES6 standard jo directly array ke Values nikalta hai bina index i ke jhanjhat ke.
• for...in: Objects ke Keys iterate karne ke liye.
• break: Poore loop ko turant kill/exit kar deta hai.
• continue: Current iteration ko skip karke seedha agle round par jump karta hai.

8. Real-World Example

Ecommerce cart me sabhi items ki prices loop karke Grand Total calculate karna: for (const item of cart) { total += item.price; }.

9. The Infinite Loop Disaster

let i = 0;
while (i < 5) {
  console.log(i);
  // i++ bhool gaye! i hamesha 0 rahega!
}

10. Best Practices

• Arrays iterate karne ke liye classic for (let i=0; ...) ke badle clean for...of ya array methods (forEach, map) use karein.
• Loop variable ke liye hamesha let use karein, var nahi.

11. Try It Yourself

Playground me 1 se 10 tak ke even numbers (2, 4, 6, 8, 10) print karne wala loop likhein.

12. Challenge

Ek Multiplication Table generator banayein jo kisi bhi number (e.g. 7) ka 1 se 10 tak table console me print kare (7 x 1 = 7 ...).

13. Interview Questions

14. Quick Revision

• for = Index counting.
• for...of = Array values.
• break exits; continue skips one round.

15. FAQ

Loops & Iteration: for, while & for...of

1. Simple Definition

Loops automate repetitive tasks by executing a block of code multiple times until a terminating condition is met. Modern JavaScript features classical for loops, while loops, and modern expressive iterators like for...of (for Arrays and iterables) and for...in (for Object keys).

2. Real-Life Analogy

3. Modern Iteration: for...of vs for...in

4. Controlling Loop Execution: break and continue

const numbers = [1, 2, 3, 4, 5, 6];

for (const num of numbers) {
  // Skip even numbers (jump to next iteration)
  if (num % 2 === 0) continue;

  // Stop the entire loop when reaching 5
  if (num === 5) break;

  console.log("Odd Number:", num); // Logs: 1, 3
}

5. Common Mistakes

6. Best Practices

• Use for...of when looping through arrays instead of old indexed for (let i = 0...).
• Avoid for...in for arrays because it iterates string keys and inherited prototype properties.
• Ensure while loop update conditions are guaranteed to terminate.

7. Practice Exercise

8. Interview Questions

9. Summary / Cheat Card

• Use for...of for array values.
• Use for...in for object keys.
• break exits the loop; continue skips to next cycle.

10. FAQ