Lesson 09 of 20

5 mins read

Ternary Operator & Switch Statements

In Plain English

The ternary operator (condition ? expr1 : expr2) provides a compact expression-level conditional. The switch statement matches an expression against multiple case clauses using strict equality (===).

The Mental Model

"The ternary operator is like a binary toggle switch (on/off). The switch statement is a rotary dial with numbered presets (channel 1, 2, 3, or default)."

Deep Dive: How It Works

Ternary Syntax: condition ? whenTrue : whenFalse evaluates directly to a value and can be stored in a variable.

Switch Statements: Compares using strict equality (===). Always add break to prevent fallthrough.

Default Clause: Handles cases where no specific case match is found.

Syntax Blueprint

const status = isOnline ? "Connected" : "Offline"

Ternary expressions return a value inline without needing multiple verbose if/else statements.

Core Rules to Remember

Ternary Operator: Compact single-line conditional expression.

Switch Statement: Clean dispatch mechanism for matching a variable against multiple discrete values.

Break Keyword: Terminates the switch block to prevent accidental execution of following cases.

Common Beginner Traps & How to Fix Them

Mistake:Forgetting break in a switch case.

Why it happens: Without break, execution falls through into subsequent case statements regardless of match.

How to fix: Include break at the end of each case block unless deliberate fallthrough is intended.

Pro Tip: Do not deeply nest ternary operators. If you have more than two branches, use a switch or if/else.

Live Interactive Example

Hit Run Code to see it live

Ternary and Switch Dispatch

JavaScript ES2024

Output Console

Click "Run Code" to view the rendered output.

How it works: Demonstrates inline ternary evaluation and switch case matching.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Format status with ternary and switch

Given const statusCode = 200;
Use switch(statusCode) to match 200 and log "Status: OK".

Sandbox Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.