Loops

1. Introduction

Iteration is the process of executing a block of code repeatedly. JavaScript provides several looping constructs to handle index-based iterations, condition-based loops, and collection traversals.

2. Why It Matters

Choosing the correct loop is key to writing clean and performant code. It helps avoid runtime memory exhaustion, prevents logic errors when traversing object properties, and optimizes loop execution speeds.

3. Real-World Analogy

Think of different Industrial Workspaces:

• Standard for loop (Assembly Line Index): A worker stamps 10 boxes, counting from 1 to 10. They know the exact limit before they start.
• while loop (Tank Monitor): A pump extracts water from a tank while the water level is above 10%. They don't know the exact count of seconds, they only monitor the level.
• for...of (Postman Mail Delivery): A postman has a bag of letters (iterable). They pull out each letter one by one and deliver it, without needing to know their indices.
• for...in (Inspecting a Machine): An engineer examines a machine's controls, listing all the custom configuration switches (keys) on its control board.

4. How It Works

JavaScript offers several loop structures:

1. Classical loops:

• for: Index-based iteration. Runs initialization, condition check, and increment step.
• while: Evaluates condition before each iteration.
• do...while: Runs the block once before checking the condition. Guaranteed to execute at least once.

2. Collection Iterations:

• for...in: Iterates over the enumerable property keys of an object.
• for...of: Iterates over the values of an iterable object (Array, Map, Set, string).

5. Loop Control

Iteration paths can be dynamically altered using:
• break: Exits the loop entirely.
• continue: Skips the rest of the current iteration and jumps to the next evaluation cycle.

6. Practical Example

This script demonstrates standard array search patterns using loop controls:

7. Common Mistakes

• Infinite Loops: Forgetting to increment the loop index variable inside a while loop.
• Using for...in to iterate over arrays: for...in loops over property keys (which are strings, like "0", "1"), not values. It can also iterate over prototype properties. Always use for...of or array methods for array values.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

let counter = 0;
while (counter < 5) {
  if (counter === 2) {
    continue; // skips the increment!
  }
  console.log(counter);
  counter++;
}

for (let counter = 0; counter < 5; counter++) {
  if (counter === 2) continue;
  console.log(counter);
}

11. Interview Questions

12. Production Considerations

• • Array Methods vs Loops: In modern JavaScript production environments, prefer functional methods like map, filter, and reduce for operations on lists. Use loops when performance is critical or you need to exit early (which array helper methods don't support).