JavaScript Loops

Why We Need Loops

Imagine you need to print numbers from 1 to 100. Without loops, you'd write:

```javascript console.log(1); console.log(2); console.log(3); // ... 97 more lines! console.log(100); ```

That's a lot of typing. Loops let you do the same thing with just a few lines.

``` Without Loop: ┌─────────┐ │ Print 1 │ └─────────┘ ┌─────────┐ │ Print 2 │ (repeated 98 more times!) └─────────┘

With Loop: ┌──────────────┐ │ Loop │ │ Print 1-100 │ ← Does it automatically └──────────────┘ ```

The for Loop

The `for` loop is the most common loop. Let's break it down:

```javascript for (let i = 0; i < 5; i++) { console.log(i); } ```

**What each part means:**

1. **`let i = 0`** - Start with i equal to 0 2. **`i < 5`** - Keep going while i is less than 5 3. **`i++`** - After each loop, add 1 to i 4. **`{ console.log(i); }`** - This code runs each time

**What happens step by step:**

``` Loop 1: i = 0, is 0 < 5? Yes → Print 0, then i becomes 1 Loop 2: i = 1, is 1 < 5? Yes → Print 1, then i becomes 2 Loop 3: i = 2, is 2 < 5? Yes → Print 2, then i becomes 3 Loop 4: i = 3, is 3 < 5? Yes → Print 3, then i becomes 4 Loop 5: i = 4, is 4 < 5? Yes → Print 4, then i becomes 5 Loop 6: i = 5, is 5 < 5? No → Stop! ```

**Output:** 0, 1, 2, 3, 4

Looping Through an Array

One of the most common uses of loops is going through arrays:

```javascript const fruits = ['apple', 'banana', 'orange'];

for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } ```

**What happens:** - `fruits.length` is 3 (there are 3 items) - Loop runs while i is 0, 1, or 2 - Each time, it prints `fruits[i]` (the item at that position)

**Output:** apple, banana, orange

The while Loop

A `while` loop keeps running as long as a condition is true:

```javascript let count = 0;

while (count < 5) { console.log(count); count = count + 1; } ```

**What happens:** 1. Check: Is count < 5? 2. If yes, run the code and add 1 to count 3. Check again 4. Repeat until count is 5 or more

**Use when:** You don't know exactly how many times to loop. Like "keep asking for password until it's correct."

forEach - Easier Way for Arrays

There's an easier way to loop through arrays:

```javascript const fruits = ['apple', 'banana', 'orange'];

fruits.forEach(function(fruit) { console.log(fruit); }); ```

This does the same thing as the for loop, but shorter. It automatically goes through each item in the array.

Real Example: Processing a List

Let's say you have a list of prices and want to calculate the total:

```javascript const prices = [10, 20, 30, 15]; let total = 0;

for (let i = 0; i < prices.length; i++) { total = total + prices[i]; }

console.log(total); // 75 ```

**What happens:** 1. Start with total = 0 2. Loop through each price 3. Add each price to the total 4. After the loop, total has the sum

Common Mistakes

**Infinite loop (never stops):** ```javascript let i = 0; while (i < 5) { console.log(i); // Forgot to add i++! // This runs forever! } ```

Always make sure your loop has a way to stop!

Quick Tips

1. **Use for loops when you know how many times** - Like "do this 10 times" 2. **Use while loops when you don't know** - Like "keep going until something happens" 3. **Use forEach for arrays** - It's the easiest way 4. **Always test your loops** - Make sure they actually stop!

Loops are how you handle lists of things. Without them, you'd have to write the same code over and over. With loops, you write it once and it repeats automatically.