You will be able to use the JavaScript conditional (ternary) operator to choose between two values in a compact, readable expression.
What it is
The conditional operator, often called the ternary operator, is a compact form of if/else that returns one of two values. It is an expression, so it can be used inside assignments, function arguments, template literals, and return statements. The three parts are a condition, a value for true, and a value for false. Related terms include conditional expression, ternary operator, and inline if.
Why it matters
- It reduces boilerplate when selecting a value based on a simple condition.
- It keeps assignments and returns concise, such as setting a label, class name, or message.
- It can be used directly inside template literals or function calls without a separate statement.
- It evaluates only the chosen branch, which can avoid unnecessary work or errors.
Syntax or steps
The smallest useful pattern is:
condition ? valueIfTrue : valueIfFalse;- Write a condition that JavaScript can convert to a boolean.
- Place
?after the condition. - Write the value to return when the condition is truthy.
- Place
:after that value. - Write the value to return when the condition is falsy.
Example
const age = 20;
const label = age >= 18 ? "adult" : "minor";
console.log(label); // "adult"
const score = 72;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade); // "C"
Part by part:
age >= 18is the condition."adult"is returned when the condition is truthy."minor"is returned when the condition is falsy.- The nested example checks
score >= 90, thenscore >= 80, then falls back to"C".
Common mistakes
- Using it for side effects instead of returning a value. If you need to run multiple statements, use
if/else. - Creating unreadable nested ternaries. If the logic needs more than two simple choices, prefer
if/else,switch, or a helper function. - Forgetting operator precedence. Wrap the whole ternary in parentheses when combining it with other operators, such as
const text = (isAdmin ? "admin" : "user") + " mode";. - Assuming both branches run. Only the selected branch is evaluated, so
isValid ? parse(value) : nullavoids callingparsewhen invalid.
When to use it
Use the ternary operator when you need to choose one value from two options. Use if/else when you need to run statements, handle multiple branches, or improve readability.
| Pattern | Best for | Example |
|---|---|---|
| Ternary operator | Returning one of two values | const status = ok ? "ready" : "blocked"; |
if/else | Running statements or complex logic | if (ok) { show(); } else { hide(); } |
switch | Many discrete cases | switch (role) { case "admin": ... } |
Practice
Guided exercise: create a variable named temperature with the value 35. Use a ternary operator to set message to "hot" when the temperature is greater than or equal to 30, otherwise "cool".
const temperature = 35;
const message = temperature >= 30 ? "hot" : "cool";
console.log(message); // "hot"
Challenge: write a ternary that returns "even" or "odd" for a number. Hint: use number % 2 === 0 as the condition.
Quick check
Question: What does const result = 0 ? "yes" : "no"; store in result?
Answer: "no", because 0 is falsy.
Summary
The ternary operator is a JavaScript expression that returns one of two values based on a condition. It is useful for compact value selection, but it should be reserved for simple cases where readability remains clear.