Skip to content

Conditions

if/else, switch, ternary operator, truthy/falsy values, and short-circuit evaluation.

What you'll learn

  • if, else if, and else statements
  • The switch statement for multi-way branching
  • The ternary operator for concise conditionals
  • Truthy and falsy values in JavaScript
  • Short-circuit evaluation with && and ||

Concept

if / else if / else

The fundamental branching construct:

const score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}

switch

Use switch when comparing one value against many constants. Always include break or execution falls through to the next case:

const day = "Monday";
switch (day) {
  case "Monday":
  case "Tuesday":
    console.log("Start of week");
    break;
  case "Friday":
    console.log("Almost weekend");
    break;
  default:
    console.log("Midweek");
}

The Ternary Operator

A concise if/else that returns a value:

const age = 20;
const status = age >= 18 ? "adult" : "minor";

Nesting ternaries is possible but hurts readability — prefer if/else for complex logic.

Truthy and Falsy

In a boolean context, these values are falsy: false, 0, "", null, undefined, NaN, 0n. Everything else is truthy — including "0", [], and {}.

if ("0") console.log("runs");     // strings are truthy (even "0")
if ([]) console.log("runs");      // arrays are truthy (even empty)
if (0) console.log("skipped");    // 0 is falsy

Short-Circuit Evaluation

&& returns the first falsy value (or the last value if all are truthy). || returns the first truthy value. This is handy for defaults and guards:

const config = { timeout: 0 };
const timeout = config.timeout || 3000; // 3000 — but 0 is a valid timeout!

// Use ?? (nullish coalescing) for this case
const safeTimeout = config.timeout ?? 3000; // 0 — only null/undefined trigger the default

Prefer ?? (ES2020) when 0 or "" are valid values, because || treats them as falsy.

Example

              // if / else if / else
function grade(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  if (score >= 60) return "D";
  return "F";
}
console.log("Grade for 85:", grade(85));

// Ternary operator
const hour = 14;
const period = hour < 12 ? "morning" : hour < 18 ? "afternoon" : "evening";
console.log("It is", period);

// Short-circuit for defaults
const user = { name: "", age: 0 };
const displayName = user.name || "Anonymous"; // "Anonymous" — empty string is falsy
const displayAge = user.age ?? 18;             // 0 — nullish coalescing keeps 0
console.log(displayName, displayAge);

// switch with fall-through grouping
function getDayType(day) {
  switch (day) {
    case "Saturday":
    case "Sunday":
      return "weekend";
    default:
      return "weekday";
  }
}
console.log("Saturday is a", getDayType("Saturday"));

Shows if/else chaining, nested ternaries, short-circuit || for defaults, nullish coalescing ?? to preserve 0 and empty strings, and switch with intentional fall-through.

Try it

  • Math Evaluator

    Evaluate expressions that often appear in conditions.

  • Regex Tester

    Regex test results are often used in if conditions.

Common mistakes

The mistake

Using || for defaults when 0 or empty string are valid values

The fix

|| treats 0, '', and false as falsy. Use the nullish coalescing operator ?? (ES2020) which only falls back on null or undefined.

The mistake

Forgetting break in a switch statement

The fix

Without break, execution falls through to the next case. Always add break (or return) unless you intentionally want fall-through. Group cases intentionally as shown in the example.

Related Resources

Related Cheatsheets

Practice Conditions

2 exercises

Practice Conditions

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors