Automating Tasks: JavaScript Loops

In programming, one of our core principles is **DRY (Don't Repeat Yourself)**. If you find yourself writing the same line of code multiple times, there's almost certainly a better way. In JavaScript, that better way is almost always a **loop**. Loops are fundamental constructs that allow you to execute a block of code repeatedly, saving you time, reducing errors, and making your code more powerful.

1. The `for` Loop: The Counter

The `for` loop is the most common loop you'll encounter. It's perfect for when you **know in advance** how many times you want to iterate. Its syntax is composed of three parts, separated by semicolons:

1. Initialization: Runs once before the loop starts. Typically where you declare a counter variable (e.g., `let i = 0`).
2. Condition: Checked *before* every iteration. If it evaluates to `true`, the loop's code block runs. If `false`, the loop stops.
3. Final Expression (Increment): Runs *after* every iteration. This is where you update your counter (e.g., `i++`).

// Prints numbers 0 through 4
for (let i = 0; i < 5; i++) {
  console.log("The count is: " + i);
}
// Output:
// The count is: 0
// The count is: 1
// The count is: 2
// The count is: 3
// The count is: 4

2. The `while` Loop: The Sentinel

The `while` loop is simpler. It has only one part: a **condition**. The loop will run *as long as* the condition remains `true`. This is ideal for situations where you **don't know** how many iterations you'll need, such as waiting for user input, processing a file, or running a game's main logic.

let gameIsRunning = true;
let energy = 10;

while (energy > 0) {
  console.log("Player attacks! Energy left: " + energy);
  energy--; // Crucial: You must update the condition variable!
}
console.log("Game over.");

Warning: If you forget to update the variable in the condition (like `energy--`), the condition will *never* become false, and you will create an **infinite loop**, crashing your browser.

3. The `do-while` Loop: The Doer

The `do-while` loop is a variant of the `while` loop with one critical difference: the condition is checked *after* the code block runs. This means a `do-while` loop is **guaranteed to execute at least one time**, no matter what.

This is perfect for prompting a user with a menu. You want to show the menu at least once *before* you check if they chose the "exit" option.

let choice;

do {
  // This code runs at least once
  choice = prompt("Enter a command (or 'exit' to quit):");
  console.log("You typed: " + choice);
} while (choice !== "exit");

console.log("Exiting program.");

4. Modern Iteration: `for...of` and `for...in`

Modern JavaScript introduced easier ways to iterate over data structures:

• for...of: The new standard for iterating over **iterables** like Arrays, Strings, Maps, and Sets. It gives you the **value** of each item directly. It's clean and simple.
• for...in: Used to iterate over the **enumerable properties** of an **object**. It gives you the **key** (or index) as a string, not the value.

const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}
// Output: "red", "green", "blue"

const user = { name: 'Ada', age: 30 };
for (const key in user) {
  console.log(key + ": " + user[key]);
}
// Output: "name: Ada", "age: 30"

Warning: Do not use `for...in` to iterate over an Array. It can be slow and iterate over inherited properties, leading to unexpected bugs. Use `for...of` or a standard `for` loop for arrays.

5. Controlling the Flow: `break` and `continue`

Sometimes you don't want to just let a loop run its course. You can control its execution with two keywords:

• break: **Terminates the loop entirely.** As soon as the code hits `break`, it jumps out of the loop and continues with the code *after* the loop. Perfect for finding the first match in a search.
• continue: **Skips the current iteration.** It stops the current cycle and jumps straight to the *next* one (or the increment step in a `for` loop). Useful for skipping over bad data.

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    continue; // Skip the number 3
  }
  if (i === 7) {
    break; // Stop the loop when we hit 7
  }
  console.log(i);
}
// Output: 0, 1, 2, 4, 5, 6

Key Takeaway: Choose the right loop for the job. Use `for` for known counts, `while` for unknown conditions, `do-while` to always run once, and `for...of` to iterate over array values.