Loops | Basic Coding Concepts

What if you need to do the same thing 100 times? Or go through every item in a list? Loops let you repeat code automatically, saving you from writing the same thing over and over.

Why We Need Loops

Imagine you want to print numbers 1 through 100. Without loops, you'd need 100 lines of code! With a loop, you can do it in just 3 lines.

🔁

Real-World Analogy

Think of a washing machine. It doesn't wash each piece of clothing with a separate instruction—it loops through the same wash cycle for everything inside. That's what loops do in code!

Watch a Loop in Action

The for Loop

The for loop is the most common loop. It's perfect when you know exactly how many times you want to repeat.

for (let i = 0; i < 5; i++) {
  console.log("Iteration: " + i);
}
// Outputs: 0, 1, 2, 3, 4

A for loop has three parts:

Initialization (let i = 0) — Sets up the counter
Condition (i < 5) — Keeps looping while true
Update (i++) — Changes the counter after each loop

for ( let i = 0 ; i < 5 ; i++ ) ...

1. Start 2. Condition 3. Update

Try It Yourself

The while Loop

The while loop keeps running as long as a condition is true. It's best when you don't know how many iterations you'll need.

let number = 1;

while (number <= 5) {
  console.log(number);
  number++;  // Don't forget this or it loops forever!
}
// Outputs: 1, 2, 3, 4, 5

⚠️

Watch Out: Infinite Loops!

If your loop condition never becomes false, your loop runs forever! This will crash your browser or program. Always make sure your loop has a way to stop.

// 🚫 DANGER: Infinite loop!
while (true) {
  console.log("Help!");  // Never stops!
}

The do...while Loop

This loop always runs at least once, then checks the condition:

let i = 0;

do {
  console.log("This runs at least once");
  i++;
} while (i < 3);

Looping Through Arrays

One of the most common uses for loops is going through each item in an array:

let colors = ["red", "green", "blue"];

// Classic for loop
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

// for...of loop (cleaner!)
for (let color of colors) {
  console.log(color);
}

// forEach method
colors.forEach(function(color) {
  console.log(color);
});

for

Best when you need the index or specific control

for...of

Best for simply going through values

forEach

Best when using array methods

Loop Control: break and continue

Sometimes you need to exit a loop early or skip an iteration:

// break - exits the loop completely
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;  // Stop at 5
  }
  console.log(i);
}
// Outputs: 0, 1, 2, 3, 4

// continue - skips to the next iteration
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;  // Skip 2
  }
  console.log(i);
}
// Outputs: 0, 1, 3, 4

Common Loop Patterns

// Sum all numbers
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let num of numbers) {
  sum += num;
}
console.log(sum);  // 15

// Find an item
let names = ["Alice", "Bob", "Charlie"];
for (let name of names) {
  if (name === "Bob") {
    console.log("Found Bob!");
    break;
  }
}

// Count occurrences
let text = "hello world";
let count = 0;
for (let char of text) {
  if (char === "l") {
    count++;
  }
}
console.log("Letter 'l' appears " + count + " times");  // 3

Quick Quiz

Key Takeaways

for loops are great when you know the number of iterations
while loops are great when you don't know when to stop
for...of is the cleanest way to loop through arrays
Always make sure loops can eventually stop (avoid infinite loops!)
break exits a loop, continue skips to the next iteration

What's Next?

Now let's learn about functions—reusable blocks of code that make your programs more organized and powerful!