When should I use switch vs if/else?

Use switch when comparing one value against many possible matches (like days, statuses, roles). Use if/else when conditions involve ranges, complex expressions, or different variables.

Can I use expressions in switch cases?

No — switch cases must be constant values, not expressions. For example, 'case x > 5:' doesn't work as you'd expect. Use if/else for range checks.

Is 'else' always required?

No. else is optional. If you only need to act when something is true (and do nothing otherwise), just use if without else.

What's wrong with deeply nested if/else?

It's hard to read and maintain. Prefer early returns, guard clauses, or switch statements. Aim for a maximum nesting depth of 2-3 levels.

Why is [] truthy but [] == false is true?

When JavaScript compares [] == false, it converts both sides: [] becomes '' (empty string), then 0. false becomes 0. So 0 == 0 is true. This is why you should always use === to avoid coercion surprises.

JavaScript Conditional Statements

Make decisions in code. Execute different paths based on conditions.

Module 2 · Control Flow

Programs make decisions and repeat work. Conditionals choose paths, loops repeat actions, and nested structures combine both. Mastering control flow turns a script that runs once into software that reacts to data and user input.

Learn Conditionals in JavaScript — covering if Statement, if...else, else if Chain, Truthy & Falsy with interactive visual examples and step-by-step explanations.

About this module

Control flow is how programs decide what to do next. If a user is logged in, show the dashboard; otherwise, redirect to login. If a cart total exceeds a threshold, apply a discount. These everyday behaviors all depend on conditionals and loops.

This module walks through if/else, switch, for and while loops, and how to combine them without losing readability. Visual step-throughs help you see exactly which branch runs and how loop counters change on each iteration.

Why this matters

Understanding conditionals is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

if Statement
if...else
else if Chain
Truthy & Falsy
switch Statement
Best Practices

Where you'll use it

Building interactive web applications with conditionals
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

The if Statement

Execute code only when a condition is true.

The if statement evaluates a condition. If the result is true, the code block executes. If false, it's skipped entirely.

if (condition) {
  // code runs ONLY if condition is true
}

// Example:
if (temperature > 30) {
  console.log("It's hot outside!");
}

temperature =35

temperature > 30 →true

> "It's hot outside!"

condition?

true

execute block

false

skip

if...else

Two branches: one for true, one for false.

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

age =20

> "You can vote!"

// else runs when condition is false
let hour = 14;
let greeting;

if (hour < 12) {
  greeting = "Good morning";
} else {
  greeting = "Good afternoon";
}

console.log(greeting);

Visualize

→ "Good afternoon"

else if Chain

Multiple conditions checked in order.

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

score =85

score >= 90

score >= 80← matched

score >= 70

score >= 60

else

💡 Conditions are checked top to bottom. The first match wins — remaining conditions are not evaluated.

Truthy & Falsy

Any value can be used as a condition.

JavaScript automatically converts values to boolean in conditions. Values that become false are called falsy. Everything else is truthy.

Falsy Values (6 total)

falseboolean false

0zero

""empty string

nullno value

undefinednot assigned

NaNnot a number

Truthy (everything else)

"hello"non-empty string

42non-zero number

[]empty array!

{}empty object!

"0"string "0"!

"false"string "false"!

Test a value:

if (hello) → true (truthy — block runs)

// Common patterns using truthy/falsy:
let name = "";
if (name) {
  console.log("Has name");  // skipped — "" is falsy
}

let items = [];
if (items.length) {
  console.log("Has items"); // skipped — 0 is falsy
}

let user = getUser();
if (user) {
  console.log(user.name);   // safe — only runs if user exists
}

switch Statement

Match a value against multiple cases.

switch (expression) {
  case value1:
    // code for value1
    break;
  case value2:
    // code for value2
    break;
  default:
    // code if no case matches
}

case "Wednesday": → Weekday 💼

// Real example:
switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    type = "Weekday";
    break;         // ← DON'T forget break!
  case "Saturday":
  case "Sunday":
    type = "Weekend";
    break;
  default:
    type = "Invalid day";
}

// Without break — "fall through":
switch (2) {
  case 1:
    console.log("one");
  case 2:
    console.log("two");   // ← matches here
  case 3:
    console.log("three"); // ← also runs!
}
// Output: "two", "three"

Without break, execution 'falls through' to the next case. This is usually a bug!

💡 Missing break causes fall-through

1 / 2

Best Practices

Write cleaner conditional code.

Use early returns to reduce nesting

✓ Better

function getDiscount(user) {
  if (!user) return 0;
  if (!user.isPremium) return 5;
  return 20;
}

✗ Avoid

function getDiscount(user) {
  if (user) {
    if (user.isPremium) {
      return 20;
    } else {
      return 5;
    }
  } else {
    return 0;
  }
}

Prefer === over ==

✓ Better

if (value === "") { ... }
if (count === 0) { ... }

✗ Avoid

if (value == "") { ... }  // "" == 0 is true!
if (count == false) { ... }

Use switch for many values

✓ Better

switch (status) {
  case "loading": return <Spinner />;
  case "error": return <Error />;
  case "success": return <Data />;
}

✗ Avoid

if (status === "loading") return <Spinner />;
else if (status === "error") return <Error />;
else if (status === "success") return <Data />;

Exercises

Test your understanding.

Try it yourself

What does this output?

const x = 0;
if (x) {
  console.log("yes");
} else {
  console.log("no");
}

Which values are falsy in JS? Name one besides 0.

What keyword handles multiple fixed value comparisons?

What does this output?

const age = 20;
const msg = age >= 18 ? "adult" : "minor";
console.log(msg);

Frequently Asked Questions

Common questions about conditionals.

🧠

Quick Check

Test your understanding — 3 questions

Question 1 of 3

Predict Output

What will be logged?

let age = 18;
if (age >= 18) {
  console.log("adult");
} else {
  console.log("minor");
}

// Common patterns using truthy/falsy: let name = ""; if (name) { console.log("Has name"); // skipped — "" is falsy } let items = []; if (items.length) { console.log("Has items"); // skipped — 0 is falsy } let user = getUser(); if (user) { console.log(user.name); // safe — only runs if user exists }

// Real example: switch (day) { case "Monday": case "Tuesday": case "Wednesday": case "Thursday": case "Friday": type = "Weekday"; break; // ← DON'T forget break! case "Saturday": case "Sunday": type = "Weekend"; break; default: type = "Invalid day"; }

// Without break — "fall through": switch (2) { case 1: console.log("one"); case 2: console.log("two"); // ← matches here case 3: console.log("three"); // ← also runs! } // Output: "two", "three"

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

The if Statement

if...else

else if Chain

Truthy & Falsy

switch Statement

Best Practices

Exercises

Frequently Asked Questions

Quick Check

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

The if Statement

if...else

else if Chain

Truthy & Falsy

switch Statement

Best Practices

Exercises

Frequently Asked Questions

Quick Check