Making Decisions | HAP's Learning Lab: JavaScript Control Flow

What You'll Learn at This Station

HAP's Discovery: I thought if statements were all the same. Then I learned there are three different structures — and picking the right one makes your code clearer and prevents bugs. The key is understanding when you need ONE path chosen from many.

1️⃣ Single Branch

Do something only when a condition is true. If it's false, nothing happens — code continues below.

2️⃣ Two Branches

if/else

Do one thing if true, a different thing if false. Exactly one of the two branches always runs.

🔀 Many Branches

else if

Check multiple conditions in order. The FIRST true condition wins — all others are skipped.

HAP surrounded by tangled code with an 'oops' expression

HAP's Confession:

I wrote separate if statements instead of else if — my robot got classified as BOTH "Warm" AND "Optimal" at the same time!
I put my conditions in the wrong order — checked > 60 before > 90 and everything was "Optimal."
I forgot the final else — when coreTemperature was exactly 60, nothing happened and temperatureStatus was undefined.
I used = instead of === in my condition — assigned instead of compared and broke everything!

The Three Conditional Structures

JavaScript gives you three ways to make decisions. Each one is right for different situations:

Structure 1: Single Branch (if)

// Use when: You want to do something only if a condition is true
// If false: Nothing happens, code continues below

let energyLevel = 15;

if (energyLevel < 20) {
    console.log("Warning: Low energy!");
}

// Code continues here regardless
console.log("Status check complete.");

The warning only appears when energy is low. Otherwise, JavaScript skips the block entirely.

Structure 2: Two Branches (if/else)

// Use when: You need to handle both true AND false cases
// Guarantee: Exactly ONE of the two branches always runs

let isOnline = true;

if (isOnline) {
    console.log("Robot is ready for tasks!");
} else {
    console.log("Robot is offline. Please reconnect.");
}

// One of those messages will ALWAYS appear

When you need to handle both cases — success and failure, yes and no — use if/else.

Structure 3: Many Branches (if/else if/else)

// Use when: You have multiple exclusive categories
// Guarantee: Exactly ONE branch runs (the first true one, or else)

let coreTemperature = 85;
let temperatureStatus;

if (coreTemperature > 90) {
    temperatureStatus = "OVERHEATING";
} else if (coreTemperature > 75) {
    temperatureStatus = "Warm";
} else if (coreTemperature > 60) {
    temperatureStatus = "Optimal";
} else {
    temperatureStatus = "Cool";
}

console.log(temperatureStatus);  // "Warm" (only one classification!)

With 85 degrees, JavaScript checks each condition in order. The first true condition (> 75) wins, and all remaining conditions are skipped.

Why Order Matters

This is where I made my biggest mistake. Watch what happens when you put conditions in the wrong order:

❌ Wrong Order

If you check > 60 first, a temperature of 95 matches immediately — it never reaches the > 90 check!

✅ Correct Order

Check from most specific (highest) to least specific (lowest). Check > 90 first, then > 75, then > 60.

Wrong Order — Everything is "Optimal"!

let coreTemperature = 95;
let status;

// WRONG ORDER - most values will be "Optimal"!
if (coreTemperature > 60) {
    status = "Optimal";      // 95 > 60 is true! Stops here.
} else if (coreTemperature > 75) {
    status = "Warm";         // Never reached
} else if (coreTemperature > 90) {
    status = "OVERHEATING";  // Never reached
} else {
    status = "Cool";
}

console.log(status);  // "Optimal" — WRONG! 95 should be OVERHEATING

🟠 The Rule I Follow:

For numeric ranges, always check from most extreme to least extreme. Check the highest thresholds first when going up, or lowest thresholds first when going down. This ensures each value lands in its correct category.

Separate ifs vs. else if — They're Different!

This was my original bug. I thought these two code blocks were the same. They're not!

Separate if Statements — ALL Can Run

let coreTemperature = 85;

// Each if is INDEPENDENT — all conditions are checked!
if (coreTemperature > 60) {
    console.log("Above 60");  // Runs! (85 > 60)
}
if (coreTemperature > 75) {
    console.log("Above 75");  // Runs! (85 > 75)
}
if (coreTemperature > 90) {
    console.log("Above 90");  // Doesn't run (85 is not > 90)
}

// Output: "Above 60" AND "Above 75" — two messages!

else if Chain — Only ONE Runs

let coreTemperature = 85;

// else if is a CHAIN — first true condition wins!
if (coreTemperature > 90) {
    console.log("OVERHEATING");
} else if (coreTemperature > 75) {
    console.log("Warm");       // Runs! First true condition
} else if (coreTemperature > 60) {
    console.log("Optimal");    // Skipped! Already found a match
} else {
    console.log("Cool");       // Skipped!
}

// Output: "Warm" — only one message!

🟠 When to Use Which:

Separate ifs: When conditions are NOT mutually exclusive — multiple can be true at once (like checking multiple features).
else if chain: When you want exactly ONE outcome from multiple possibilities (like classification or grading).

Try the Status Classifier Demo

I built an interactive tool where you can adjust the temperature slider and watch which branch of the if/else if/else chain executes. The active branch lights up!

🔬 Status Classifier: Drag the temperature slider and watch the code panel highlight which branch runs. See how the classification changes as you move through different temperature ranges!

→ Launch the Status Classifier Demo

🎓 Conditionals Quick Reference

Pick the Right Structure

if alone for optional actions. if/else for two-way choices. if/else if/else for multiple categories.

Order Matters in else if Chains

For numeric ranges, check from most extreme to least extreme. The first true condition wins!

Always Include a Final else

The final else catches anything that doesn't match your conditions. It prevents undefined results.

Separate ifs vs. else if

Separate ifs are independent — all can run. else if chains are exclusive — only one runs.