Week 3

3.3 Control Flow & Loops

Control Flow & Loops 

JavaScript isn’t just about storing data—it’s about making decisions and repeating actions. Imagine a video game where your character jumps if they press space and moves forward while holding the arrow key—that's control flow & loops in action!

In this section, we’ll cover:
✅ if, else if, else – Making decisions
✅ switch – Handling multiple choices
✅ Loops (for, while, do...while) – Repeating tasks
✅ break and continue – Controlling loops

Let’s dive in!

1. Conditional Statements – Making Decisions! 

if, else if, else – The Decision Makers

JavaScript checks conditions and executes different blocks of code based on the result.

Syntax: 

if (condition) {

    // Code runs if condition is true

} else if (anotherCondition) {

    // Runs if first condition is false, but this one is true

} else {

    // Runs if all conditions are false

}

Example: 

Let’s build a simple grading system!

let score = 85;

if (score >= 90) {

    console.log("You got an A!");

} else if (score >= 75) {

    console.log("You passed!");

} else {

    console.log("Try again!");

}

How it Works: 

If score is 90 or more, it prints “You got an A!”.

If not, it checks if score is at least 75, then prints “You passed!”.

If neither condition is met, it defaults to “Try again!”.

2. switch – Handling Multiple Choices

Sometimes, using many if statements isn’t efficient. That’s where switch comes in!

Syntax: 

switch (expression) {

    case value1:

        // Code runs if expression === value1

        break;

    case value2:

        // Code runs if expression === value2

        break;

    default:

        // Code runs if none of the above match

}

 Example:

Let's decide what to do based on the day of the week.

let day = "Saturday";

switch (day) {

    case "Monday":

        console.log("Start of the week...");

        break;

    case "Friday":

        console.log("Weekend loading...");

        break;

    case "Saturday":

    case "Sunday":

        console.log("It’s the weekend!");

        break;

    default:

        console.log("Just another day...");

}

How it Works:

1. JavaScript checks day against each case.

2. If it matches "Saturday", it runs “It’s the weekend!”.

3. break; prevents execution from continuing to the next cases.

• Without break, all cases below a match will also execute!

3. Loops – Automating Repetitive Tasks

Loops run the same code multiple times without rewriting it.

1, for Loop – When You Know How Many Times to Repeat

Syntax:

for (initialization; condition; update) {

    // Code runs while condition is true

}

Example:

for (let i = 1; i <= 5; i++) {

    console.log("Push-up " + i);

}

How it Works:

1. let i = 1 → Starts at 1.

2. i <= 5 → Runs while i is 5 or less.

3. i++ → Increases i by 1 after each run.

Output:

CopyEdit

Push-up 1  

Push-up 2  

Push-up 3  

Push-up 4  

Push-up 5 

2, while Loop – When You Don't Know the Exact Repeats

The while loop runs as long as the condition is true.

Example:

let fuel = 5;

while (fuel > 0) {

    console.log("Driving... Fuel left: " + fuel);

    fuel--; // Decrease fuel

}

console.log("Out of fuel!");

How it Works:

1. Runs while fuel > 0.

2. Decreases fuel by 1 each time.

3. Stops when fuel === 0.

3, do...while Loop – Always Runs at Least Once

Even if the condition is false from the start, do...while executes once before checking.

Example:

let password;

do {

    password = prompt("Enter password: ");

} while (password !== "1234");

console.log("Access granted!");

How it Works:

1. Prompts for a password.

2. Runs at least once before checking if it’s "1234".

3. If incorrect, it keeps asking.

4. break and continue – Controlling Loops

break – Stops a Loop Immediately

for (let i = 1; i <= 10; i++) {

    if (i === 5) {

        console.log("Stopping at 5!");

        break;

    }

    console.log(i);

}

Stops the loop as soon as i === 5.

continue – Skips the Current Iteration

for (let i = 1; i <= 5; i++) {

    if (i === 3) {

        console.log("Skipping 3...");

        continue;

    }

    console.log(i);

}

Skips 3 but continues with 4 and 5.

Quick Challenge – Can You Guess the Output?

let count = 1;

while (count < 5) {

    if (count === 3) break;

    console.log(count);

    count++;

}

Next up: Functions in JavaScript