Conditionals (if / else / switch)

"Every decision your app makes — show this button or hide it, allow login or block it — is powered by a conditional."

Part 1: if / else if / else

An if statement lets your program make a decision. If the condition is true, the block of code inside runs. If it's false, it's skipped.

Basic if

The simplest form — only runs if the condition is true.

javascript

let age = 20;

if (age >= 18) {
    console.log("You are an adult.");
}
// Output: You are an adult.

if / else — Two paths

else handles the case when the condition is false. You always get one path or the other.

javascript

let isRaining = true;

if (isRaining) {
    console.log("Take an umbrella.");
} else {
    console.log("Enjoy the sunshine!");
}
// Output: Take an umbrella.

if / else if / else — Multiple conditions

When you have more than two possibilities, chain else if blocks. JavaScript checks them top to bottom and stops at the first one that's true.

javascript

let score = 75;

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

The order matters. Since score = 75, the first condition (>= 90) is false, so JavaScript moves down and hits >= 75 — true! It runs that block and stops.

Common mistake: overlapping conditions

A tricky bug beginners hit — putting the less specific condition first. The correct condition never gets reached because an earlier one already matched.

javascript

let score = 95;

// ❌ Wrong order — score >= 60 catches everything first!
if (score >= 60) {
    console.log("Grade: C");  // ← This runs for 95 too!
} else if (score >= 90) {
    console.log("Grade: A");  // ← Never reached
}

// ✅ Correct — most specific condition first
if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 60) {
    console.log("Grade: C");
}

Part 2: switch / case

A switch statement is a cleaner way to handle many exact-value comparisons on the same variable. Think of it as checking: "which case does this variable match?"

Basic switch

javascript

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("Start of the week!");
        break;
    case "Friday":
        console.log("Almost the weekend!");
        break;
    case "Saturday":
    case "Sunday":
        console.log("It's the weekend!");
        break;
    default:
        console.log("A regular weekday.");
}
// Output: Start of the week!

The break is critical — without it, execution "falls through" into the next case. Notice how Saturday and Sunday share the same block by stacking cases.

What happens without break? (Fall-through)

This is one of the most common bugs. Forgetting break causes all following cases to run.

javascript

let color = "red";

switch (color) {
    case "red":
        console.log("Red");   // runs
    case "blue":
        console.log("Blue");  // also runs! (no break above)
    case "green":
        console.log("Green"); // also runs!
}
// Output:
// Red
// Blue
// Green

// Fix: add break after each case

switch vs if-else — When to use which?

Use switch when

You're comparing one variable against many fixed values (like a menu, day of week, or status code).

javascript

// Cleaner with switch
switch (statusCode) {
    case 200: console.log("OK"); break;
    case 404: console.log("Not Found"); break;
    case 500: console.log("Server Error"); break;
}

Use if-else when

You're checking ranges, multiple variables, or complex conditions that can't be a simple value match.

javascript

// Ranges need if-else
if (temp > 35) {
    console.log("Very hot");
} else if (temp > 20) {
    console.log("Warm");
} else {
    console.log("Cold");
}

Part 3: Ternary Operator

The ternary operator is a one-line shorthand for a simple if/else. The syntax is: condition ? valueIfTrue : valueIfFalse.

Basic ternary

javascript

let age = 20;

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

// Ternary — same thing in one line
let status2 = age >= 18 ? "adult" : "minor";

console.log(status2); // adult

Common use: inline rendering

The ternary shines when you need a value inline — like inside a string or a UI expression.

javascript

let isLoggedIn = true;
let userName = "Vivek";

// Show a greeting based on login state
let message = `Hello, ${isLoggedIn ? userName : "Guest"}!`;
console.log(message); // Hello, Vivek!

// Another example: odd or even
let num = 7;
console.log(num % 2 === 0 ? "Even" : "Odd"); // Odd

Nested ternary — use sparingly

You can chain ternaries, but it quickly becomes hard to read. If you need more than two outcomes, if-else is clearer.

javascript

let score = 85;

// Technically works, but hard to read:
let grade = score >= 90 ? "A" : score >= 75 ? "B" : score >= 60 ? "C" : "F";

// Better: just use if-else for 3+ outcomes
let grade2;
if (score >= 90)      grade2 = "A";
else if (score >= 75) grade2 = "B";
else if (score >= 60) grade2 = "C";
else                  grade2 = "F";

console.log(grade2); // B