🔀 JavaScript Conditional Statements

1️⃣ The if Statement

Run a block of code only if a condition is true.

const age = 20;

if (age >= 18) {
    console.log("You can vote!");
}

• if — starts the block
• (age >= 18) — the condition (in parentheses)
• { } — the code to run if true

2️⃣ if / else — Two Paths

Add an else block to handle the "false" case.

const temperature = 30;

if (temperature > 25) {
    console.log("It's hot outside");
} else {
    console.log("It's cool outside");
}

3️⃣ if / else if / else — Multiple Paths

Chain conditions together with else if. JavaScript checks them top to bottom and stops at the first true one.

const score = 85;

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

// Output: Grade: B (because 85 >= 80)

🎚️ Interactive: Grade Calculator

Slide to change the score and see the conditional logic run live.

4️⃣ The switch Statement

When you're comparing the same value against many specific cases, switch is cleaner than a chain of else if.

const day = "Wednesday";

switch (day) {
    case "Monday":
        console.log("Start of the week");
        break;
    case "Wednesday":
        console.log("Midweek!");
        break;
    case "Friday":
        console.log("Almost weekend");
        break;
    default:
        console.log("Just another day");
}

// Output: Midweek!

🚦 Interactive: Traffic Light Logic

Click a light to see what JavaScript decides. Uses a switch statement.

5️⃣ Ternary Operator — Short if/else

For simple true/false decisions, use the ternary operator: condition ? ifTrue : ifFalse.

const age = 20;
const status = age >= 18 ? "Adult" : "Minor";
console.log(status);  // "Adult"

// Same as:
let status2;
if (age >= 18) {
    status2 = "Adult";
} else {
    status2 = "Minor";
}

🚀 Try It Live

Edit the code below and click Run.

✨ Challenge: Temperature Advisor

Write a conditional that prints advice based on a temperature value:

• Below 0 → "Freezing! Wear a heavy coat."
• 0 to 15 → "Cold. Bring a jacket."
• 16 to 25 → "Pleasant. Light clothing."
• Above 25 → "Hot! Stay hydrated."

📚 What's Next?

• Lesson 1.5: Loops → — repeat code with for and while.
• ← Previous: Lesson 1.3 Operators
• ⚡ JavaScript Course Hub →