🔀 Lesson 5: Conditionals

Introduction

Programs typically execute code sequentially. However, robust applications must make decisions—executing different logic paths based on application state (e.g., user authentication, input validation, feature flags).

Conditionals facilitate this control flow, running code blocks selectively based on boolean conditions. This is essential for creating interactive, responsive applications.

if / else Statements

The if statement is the most fundamental conditional. It evaluates a condition and runs a block of code only when that condition is true.

Basic if

let temperature = 95;

if (temperature > 90) {
    console.log("It's really hot outside! Stay hydrated. 🔥");
}
// This runs because 95 > 90 is true
                

if / else

Add an else block to handle the case when the condition is false.

let age = 16;

if (age >= 18) {
    console.log("You can vote!");
} else {
    console.log("You're not old enough to vote yet.");
}
// Output: "You're not old enough to vote yet."
                

Multiple Conditions with Logical Operators

Remember && (AND) and || (OR) from the last lesson? Here's where they shine.

let age = 25;
let hasTicket = true;

if (age >= 18 && hasTicket) {
    console.log("Welcome to the concert!");
} else {
    console.log("Sorry, you can't enter.");
}

// Using OR
let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
    console.log("No work today! 🎉");
} else {
    console.log("Time to get to work.");
}
                

// ❌ Avoid — easy to break when adding lines
if (loggedIn) console.log("Welcome");

// ✅ Always use braces
if (loggedIn) {
    console.log("Welcome");
}
                    

else if Chains

When you have more than two possible outcomes, chain else if blocks. JavaScript checks each condition in order and runs the first one that's true.

let score = 82;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else if (score >= 60) {
    console.log("Grade: D");
} else {
    console.log("Grade: F");
}
// Output: "Grade: B"
                

Real-World Example: Time-Based Greeting

let hour = new Date().getHours();  // 0–23

if (hour < 12) {
    console.log("Good morning! ☀️");
} else if (hour < 17) {
    console.log("Good afternoon! 🌤️");
} else if (hour < 21) {
    console.log("Good evening! 🌅");
} else {
    console.log("Good night! 🌙");
}
                

switch Statements

When you're comparing one value against many specific options, a switch statement can be cleaner than a long else if chain.

let day = "Wednesday";

switch (day) {
    case "Monday":
        console.log("Start of the work week 😩");
        break;
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
        console.log("Midweek grind 💪");
        break;
    case "Friday":
        console.log("TGIF! 🎉");
        break;
    case "Saturday":
    case "Sunday":
        console.log("Weekend vibes! 🏖️");
        break;
    default:
        console.log("That's not a valid day.");
}
// Output: "Midweek grind 💪"
                

How switch Works

1. JavaScript evaluates the expression in switch()
2. It compares the result to each case using strict equality (===)
3. When a match is found, that block runs
4. break exits the switch — without it, execution "falls through" to the next case!
5. default runs if no case matches (like else)

// ❌ Bug! Missing break causes fall-through
let fruit = "apple";

switch (fruit) {
    case "apple":
        console.log("Apples are $1.50/lb");
        // No break! Falls through to next case!
    case "banana":
        console.log("Bananas are $0.75/lb");
        break;
}
// Output: BOTH lines print!
// "Apples are $1.50/lb"
// "Bananas are $0.75/lb"
                    

When to Use switch vs. if/else

The Ternary Operator

The ternary operator (? :) is a compact way to write a simple if/else that produces a value. It's the only JavaScript operator that takes three operands.

// Syntax: condition ? valueIfTrue : valueIfFalse

let age = 20;
let status = age >= 18 ? "adult" : "minor";
console.log(status);  // "adult"

// Equivalent if/else:
// let status;
// if (age >= 18) {
//     status = "adult";
// } else {
//     status = "minor";
// }
                

Common Use Cases

// Assigning a value based on a condition
let score = 85;
let result = score >= 60 ? "Pass" : "Fail";
console.log(result);  // "Pass"

// Inside template literals
let items = 3;
console.log(`You have ${items} item${items === 1 ? "" : "s"} in your cart.`);
// "You have 3 items in your cart."

// Setting a default
let username = "";
let displayName = username ? username : "Guest";
console.log(displayName);  // "Guest" (empty string is falsy)
                

// ✅ Good — clear and simple
let label = count === 0 ? "empty" : "has items";

// ❌ Bad — nested ternaries are hard to read
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
// Use if/else or else-if for this instead!
                    

Nesting & Guard Clauses

You can nest if statements inside other if statements, but deep nesting makes code hard to follow. Guard clauses are a cleaner alternative.

Nested Conditionals (Often Messy)

// ❌ Deeply nested — hard to follow
function processOrder(user, item) {
    if (user) {
        if (user.isLoggedIn) {
            if (item.inStock) {
                if (user.balance >= item.price) {
                    console.log("Order placed!");
                } else {
                    console.log("Insufficient funds.");
                }
            } else {
                console.log("Item out of stock.");
            }
        } else {
            console.log("Please log in.");
        }
    } else {
        console.log("No user found.");
    }
}
                

Guard Clauses (Much Better)

A guard clause checks for problems early and exits, so the main logic stays flat and readable.

// ✅ Guard clauses — flat and readable
function processOrder(user, item) {
    if (!user) {
        console.log("No user found.");
        return;
    }
    if (!user.isLoggedIn) {
        console.log("Please log in.");
        return;
    }
    if (!item.inStock) {
        console.log("Item out of stock.");
        return;
    }
    if (user.balance < item.price) {
        console.log("Insufficient funds.");
        return;
    }

    console.log("Order placed!");
}
                

Truthy/Falsy in Conditions

Remember truthy and falsy values from Lesson 4? They work directly in if conditions — you don't need to compare to true or false explicitly.

let username = "Ray";

// ❌ Unnecessary — comparing to truthy/falsy explicitly
if (username !== "" && username !== null && username !== undefined) {
    console.log(`Hello, ${username}!`);
}

// ✅ Cleaner — truthy check handles all of the above
if (username) {
    console.log(`Hello, ${username}!`);
}
// Works because non-empty strings are truthy
// Empty string, null, and undefined are all falsy
                

// Common patterns using truthy/falsy
let items = [];

if (items.length) {
    console.log(`You have ${items.length} items.`);
} else {
    console.log("Your cart is empty.");
}
// 0 is falsy, so empty array's .length (0) goes to else

let errorMessage = "";

if (errorMessage) {
    console.log(`Error: ${errorMessage}`);
}
// Empty string is falsy, so this won't run
                

Hands-on Exercise

// Grade Calculator

// TODO: Set the student's score
// const studentName = "Alex";
// const score = 78;

// TODO: Use if/else if/else to determine the letter grade:
// 90–100: "A"
// 80–89:  "B"
// 70–79:  "C"
// 60–69:  "D"
// Below 60: "F"

// TODO: Use a switch on the letter grade to set a message:
// A → "Excellent work!"
// B → "Great job!"
// C → "Solid effort, keep improving!"
// D → "You passed, but review the material."
// F → "Let's set up a study plan."

// TODO: Use a ternary to determine pass/fail (60+ is passing)

// TODO: Log the results:
// "Alex scored 78 (C) — Solid effort, keep improving!"
// "Status: Pass"

// BONUS: Add an edge case check — if score is below 0
// or above 100, log "Invalid score" and skip everything else
                    

const studentName = "Alex";
const score = 78;

// Guard clause for invalid scores
if (score < 0 || score > 100) {
    console.log("Invalid score. Must be between 0 and 100.");
} else {
    // Determine letter grade
    let letterGrade;

    if (score >= 90) {
        letterGrade = "A";
    } else if (score >= 80) {
        letterGrade = "B";
    } else if (score >= 70) {
        letterGrade = "C";
    } else if (score >= 60) {
        letterGrade = "D";
    } else {
        letterGrade = "F";
    }

    // Determine message using switch
    let message;

    switch (letterGrade) {
        case "A":
            message = "Excellent work!";
            break;
        case "B":
            message = "Great job!";
            break;
        case "C":
            message = "Solid effort, keep improving!";
            break;
        case "D":
            message = "You passed, but review the material.";
            break;
        case "F":
            message = "Let's set up a study plan.";
            break;
    }

    // Ternary for pass/fail
    const status = score >= 60 ? "Pass" : "Fail";

    // Output
    console.log(`${studentName} scored ${score} (${letterGrade}) — ${message}`);
    console.log(`Status: ${status}`);
}
                        

let x = 5;
if (x > 10) {
    console.log("A");
} else if (x > 3) {
    console.log("B");
} else if (x > 1) {
    console.log("C");
} else {
    console.log("D");
}

Summary

📚 Additional Resources

• MDN — if...else
• MDN — switch
• javascript.info — Conditional Branching
• MDN — Conditional (Ternary) Operator

🚀 What's Next?

Now your programs can make decisions, but what about repeating actions? In the next lesson, you'll learn about loops — for, while, and for...of — to process data, count, and repeat tasks efficiently.