Conditionals & Control Flow

Real programs make decisions: show the error message or the success one, allow the checkout or ask for login. JavaScript gives you if/else, the ternary, switch and logical guards to express those decisions. This chapter covers each form and when each one reads best.

if / else if / else

const score = 87;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}
// Expected output: B

Conditions evaluate top to bottom — the first truthy branch wins, so order matters: >= 80 must come after >= 90 or every high score would print “B”.

Braces are non-negotiable

// Works for one statement — but a trap waiting to spring
if (x > 0) console.log('positive');

// Always use braces: safe under diffing, linters and future edits
if (x > 0) {
  console.log('positive');
}

Truthiness in conditions

const username = 'asha';
if (username) {                       // '' would be falsy
  console.log(`Hi ${username}`);
}

let user = null;
if (!user) {                          // negated guard
  console.log('Please log in');
}

Remember the falsy list from Data Types: 0, '', null, undefined, NaN, false. Everything else — including [] and {} — is truthy.

Guard clauses: fail fast, nest less

// Nested version — hard to read
function process(order) {
  if (order) {
    if (order.paid) {
      if (order.items.length) {
        ship(order);
      }
    }
  }
}

// Guard clauses — flat and clear
function process(order) {
  if (!order) return;
  if (!order.paid) { warn('Unpaid'); return; }
  if (!order.items.length) { warn('Empty'); return; }

  ship(order);
}

Expected output: identical behaviour, dramatically better readability — the happy path stays at the left margin. This is the single most valuable control-flow habit in real codebases.

The ternary for one-liners

const status = stock > 0 ? 'In stock' : 'Sold out';
const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';

Use it for single expressions in output; switch to if/else when a branch has more than one statement.

switch

function roleLabel(role) {
  switch (role) {
    case 'admin':
      return 'Full access';
    case 'editor':
      return 'Can publish';
    case 'viewer':
      return 'Read only';
    default:
      return 'Unknown role';
  }
}
console.log(roleLabel('editor'));   // → Can publish

• Comparison is === (strict — switch (5) will not match '5').
• Every non-empty case needs break or return, otherwise execution “falls through” to the next case (occasionally useful, usually a bug).
• default runs when nothing matches — like else.
• Group cases by stacking: case 'y': case 'Y': ….

function typeName(v) {
  switch (typeof v) {
    case 'string':
    case 'boolean': return 'text-ish';
    case 'number':  return 'numeric';
    default:        return 'other';
  }
}

if vs switch — choosing

Common mistakes

• Missing break — switch falls through and executes the next case too.
• Wrong branch order — overlapping ranges must be checked from most specific to least.
• = instead of === inside conditions — if (x = 5) assigns and evaluates truthy.
• Deep nesting — more than two levels of if means guard clauses or a helper function.
• Using switch on ranges — it compares equality only.

Practice checklist

1. Write a shipping-cost function with guards: no items → 0, subtotal ≥ 100 → free, else → 9.99.
2. Convert a nested if pyramid into flat guard clauses.
3. Build a switch over days of the week that groups weekend days into one case.

Decisions pick branches — loops repeat them. Next: Loops & Iteration.