JavaScript Loops

Why We Need Loops

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

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:

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:

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:

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:

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:

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):

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.