Loops

:dart: Learning Objectives

By the end of this lesson, you'll be able to:

• Understand what loops are and why we use them
• Write for loops to repeat code a specific number of times
• Use while loops when you don't know how many times to repeat
• Create do...while loops that run at least once
• Control loops with break statements

:information_source: Info What is a Loop? A loop is a block of code that runs over and over again until a certain condition is met. Think of it like a robot that keeps doing the same task until you tell it to stop!

Imagine you have food to deliver to customers. This is how a loop works:

note In programming, we call each time through the loop an iteration. It's like counting how many times you've done the same task!

:emoji: Components of a Loop

Every loop has three important parts:

• Counter - Where we start counting (like starting at customer order #1)
• Condition - The rule that tells us when to stop (like "are there more orders?")
• Iterator - How we move to the next step (like moving to the next order)

Let's use our food delivery example:

• Counter: Start with 5 customer orders
• Condition: Keep going if there are orders left
• Iterator: Deliver one order and move to the next

tip Why Loops Matter Computers are amazing at repeating tasks thousands or even millions of times without getting tired. This is what makes them so powerful!

:emoji: For Loop

The for loop is perfect when you know exactly how many times you want to repeat something.

for (initialization; condition; update) {
    // code to run when condition is true
}

How a For Loop Works

Here's what happens step-by-step:

1. Initialize - Set up your counter variable
2. Check - Test if the condition is true
3. Run - If true, run the code inside the curly braces
4. Update - Change the counter
5. Repeat - Go back to step 2 until the condition becomes false

:bulb: For Loop Example

Let's count from 0 to 100 using a for loop:

for (var i = 0; i <= 100; i++) {
    console.log(i);
}

Here's what happens in this code:

1. Start: Create a variable i and set it to 0
2. Check: Is i less than or equal to 100? Yes! (``0 <= 100``)
3. Run: Print the value of i (prints 0)
4. Update: Add 1 to i (now i = 1)
5. Check again: Is ``1 <= 100``? Yes!
6. Keep going: This continues until i reaches 101
7. Stop: When i = 101, the condition (``101 <= 100``) is false, so the loop stops

note Quick Tip The expression i++ is shorthand for i = i + 1. It adds 1 to the variable!

:rocket: Advanced For Loop Examples

You can make your loop count by different amounts!

Count by 10s:

for (var i = 0; i <= 100; i += 10) {
    console.log(i);
}
// Output: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

Count backwards:

for (var i = 100; i >= 0; i -= 10) {
    console.log(i);
}
// Output: 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0

tip i += 10 means "add 10 to i" and i -= 10 means "subtract 10 from i"

:emoji: For Loop with Conditional Statements

You can control your loop with conditional statements:

for (var car = 1; car < 10; car += 2) {
    if (car === 7) {
        break;
    }
    console.log('The number of cars: ' + car);
}

Output:

The number of cars: 1
The number of cars: 3
The number of cars: 5

:information_source: Info About Break The break statement is like an emergency exit for your loop. When the program sees break, it immediately stops the loop and moves on to the next part of your code.

Learn more about break: https://www.w3schools.com/js/js_break.asp

:emoji: While Loop

The while loop is great when you don't know exactly how many times to repeat something. It keeps going as long as a condition is true.

while (condition) {
    // Run loop when condition is true
}

note Key Difference Unlike the for loop, the while loop doesn't have initialization or update built into its syntax. You handle these separately!

:memo: While Loop Example (Known Iterations)

You can write a while loop to do the same thing as a for loop:

var i = 0;

while (i <= 100) {
    console.log(i);
    i++;
}

This prints numbers 0 to 100, just like our for loop example!

:emoji: While Loop Example (Unknown Iterations)

While loops shine when you don't know how many times you'll need to repeat. Here's a real example:

var number = 100;

while (number > 5) {
    number = number / 3;
    console.log(number);
}

Output:

33.333333333333336
11.111111111111112
3.703703703703704

tip When to Use While Use a while loop when you're waiting for something to happen, like:

• Waiting for user input
• Processing until a calculation reaches a certain value
• Reading data until you reach the end

:video_game: Do...While Loop

Sometimes you need your code to run at least once before checking if it should continue. That's perfect for a do...while loop!

do {
    // Run at least once
} while (condition)

:information_source: Info How It Works

1. First, run the code in the do block
2. Then, check the condition
3. If true, go back to step 1
4. If false, stop the loop

The key difference: This loop always runs at least once!

:emoji: Do...While Loop Example

Here's a program that adds up positive numbers until you enter a negative one:

var sum = 0;

do {
    var number = +prompt("Enter a number: ");
    sum = sum + number;
} while (number >= 0);

console.log("The sum is " + sum);

note The + before prompt converts the text input into a number!

:bar_chart: Loop Comparison

:dart: Key Takeaways

:information_source: Info Summary

• Loops let us repeat code without writing it multiple times
• For loops are perfect when you know the exact number of repetitions
• While loops work great when the number of repetitions is unknown
• Do...while loops guarantee the code runs at least once
• Every loop needs a counter, condition, and iterator
• Use break to exit a loop early when needed

:runner: Practice Time!

Try these exercises to master loops:

1. Easy: Write a for loop that prints your name 5 times
2. Medium: Create a while loop that counts down from 10 to 1
3. Challenge: Use a do...while loop to create a simple guessing game

Remember: The best way to learn loops is to practice writing them yourself!