🔀 Conditional Statements (if, else, switch)

Why Programs Need Decisions

Without conditionals, a program can only do one fixed thing every time it runs. Conditionals let code respond: show an error if a form field is empty, apply free shipping over a threshold, greet a user by name only when they're logged in. A conditional statement evaluates a condition — an expression that resolves to true or false — and runs different code depending on the result.

💡 Analogy — a road network. An if is a gate that only opens when a condition is met. An if…else is a fork where you must pick exactly one path. An if…else if…else is a signposted junction where you take the first route you qualify for. A switch is a roundabout with clearly labelled exits, and the ternary is a quick two-way shortcut.

JavaScript gives you five tools for branching. Here's the whole family before we take each one apart:

The if Statement

The if statement runs a block of code only when its condition is truthy. If the condition is falsy, the block is skipped entirely and execution continues after it.

const age = 18;

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

Truthy & Falsy Values

A condition doesn't have to be a boolean. JavaScript will coerce any value to true or false. Knowing the exact list of falsy values is one of the highest-leverage things you can memorise as a beginner, because it explains a huge share of "why didn't my if run?" surprises.

The tricky ones are the values that feel empty but are actually truthy:

if ([])            console.log("An empty array is truthy");   // runs
if ({})            console.log("An empty object is truthy");  // runs
if ("false")       console.log("The string 'false' is truthy"); // runs
if ("0")           console.log("The string '0' is truthy");   // runs

if ("")            console.log("never runs");  // empty string is falsy
if (0)             console.log("never runs");  // zero is falsy
if (null)          console.log("never runs");  // null is falsy

if…else and else if Chains

Add an else to run alternative code when the condition is falsy — exactly one of the two blocks always runs. Add else if to test further conditions in order; the first one that is truthy wins, and the rest are skipped.

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

console.log(letterGrade(85)); // "B"

Order matters because evaluation stops at the first match. If you reversed the tests to start with score >= 60, every passing score would be graded "D" — the more specific conditions would never be reached.

function validateUsername(username) {
  if (!username) return "Username is required.";
  if (username.length < 3) return "Username must be at least 3 characters.";
  if (!/^[a-zA-Z0-9_]+$/.test(username)) {
    return "Only letters, numbers, and underscores are allowed.";
  }
  return null; // null means "valid"
}

const error = validateUsername("jo");
if (error) console.log(`Error: ${error}`);
else console.log("Username is valid!");

The switch Statement

When you're comparing one value against many discrete possibilities, a switch can read more cleanly than a long if-chain. The expression is evaluated once, then compared to each case using strict equality (===). A break ends the matched case; the optional default handles no-match.

function nextTrafficLight(current) {
  switch (current) {
    case "green":  return "yellow";
    case "yellow": return "red";
    case "red":    return "green";
    default:       return "unknown";
  }
}

console.log(nextTrafficLight("green")); // "yellow"

function seasonOf(month) {
  switch (month) {
    case 11: case 0: case 1:  return "Winter";
    case 2:  case 3: case 4:  return "Spring";
    case 5:  case 6: case 7:  return "Summer";
    case 8:  case 9: case 10: return "Fall";
    default: return "Invalid month";
  }
}

const nextLight = { green: "yellow", yellow: "red", red: "green" };
const next = nextLight[current] ?? "unknown";

The Ternary Operator

The conditional (ternary) operator is a compact expression that produces a value: condition ? valueIfTrue : valueIfFalse. Because it's an expression, it fits where a full if statement can't — inside a template literal, a JSX attribute, or a variable assignment.

const age = 20;
const status = age >= 18 ? "Adult" : "Minor";

const greeting = `Good ${new Date().getHours() < 12 ? "morning" : "afternoon"}`;

// Hard to read — avoid
const grade = s >= 90 ? "A" : s >= 80 ? "B" : s >= 70 ? "C" : "F";

// Clearer
function grade(s) {
  if (s >= 90) return "A";
  if (s >= 80) return "B";
  if (s >= 70) return "C";
  return "F";
}

Flattening Nested Logic

Deeply nested if statements — the dreaded "arrow code" that drifts ever rightward — are hard to read and harder to modify. Three techniques keep branching flat.

1. Guard clauses (early return)

Check the failure cases first and return immediately, so the happy path stays at the left margin, unindented.

// Nested and hard to follow
function processPayment(amount, user) {
  if (amount > 0) {
    if (user.account) {
      if (user.account.balance >= amount) {
        user.account.balance -= amount;
        return "Payment successful";
      } else return "Insufficient funds";
    } else return "No account found";
  } else return "Invalid amount";
}

// Flat, with guard clauses
function processPaymentBetter(amount, user) {
  if (amount <= 0) return "Invalid amount";
  if (!user.account) return "No account found";
  if (user.account.balance < amount) return "Insufficient funds";

  user.account.balance -= amount;
  return "Payment successful";
}

2. Combine with logical operators

// Instead of three nested ifs
if (isLoggedIn && hasPermission && resourceExists) {
  accessResource();
}

3. Optional chaining for safe access

// Risky: throws if profile is undefined
if (user.profile.name === "Admin") { /* ... */ }

// Safe with optional chaining (ES2020)
if (user?.profile?.name === "Admin") { /* ... */ }

Hands-on Exercise

function ticketPrice(age, dayType) {
  // Guard clause
  if (!Number.isFinite(age) || age < 0) return "Invalid age";

  // Base price by age (first match wins)
  let price;
  if (age < 5) price = 0;
  else if (age < 18) price = 8;
  else if (age >= 65) price = 10;
  else price = 15;

  // Day-type surcharge
  switch (dayType) {
    case "weekend": price += 3; break;
    case "holiday": price += 5; break;
    case "weekday": break; // no surcharge
    default: return "Invalid day type";
  }

  return price;
}

console.log(ticketPrice(10, "weekend")); // 11
console.log(ticketPrice(70, "holiday")); // 15
console.log(ticketPrice(-1, "weekday")); // "Invalid age"

Summary & Quiz

📚 Further Reading

• MDN — if…else
• MDN — switch
• MDN — Truthy & Falsy
• JavaScript.info — Conditional branching

🚀 What's Next?

Now that your code can choose a path, the next step is teaching it to repeat work. Up next: Loops (for, while, do-while) — how to run a block many times, count through arrays, and stop safely.