Conditional Statements

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

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);

→ "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 conditional statements.