JavaScript Ternary Operator

Ternary Operator Basics

The ternary operator is JavaScript's only three-part operator and a compact way to write a conditional expression that returns one of two values. The format is: condition, then a question mark, then the value to return if true, then a colon, then the value to return if false. It's called conditional because it produces different values depending on a condition, and ternary because it takes three operands. The main use case is assigning a value based on a condition without writing a full if-else block.

javascript
1// condition ? valueIfTrue : valueIfFalse
2let age = 20;
3let canVote = age >= 18 ? "Yes" : "No";
4console.log(canVote); // "Yes"
5
6// More examples
7let temperature = 25;
8let weather = temperature > 30 ? "Hot" : "Comfortable";
9console.log(weather); // "Comfortable"
10
11let isRaining = true;
12let activity = isRaining ? "Stay indoors" : "Go outside";
13console.log(activity); // "Stay indoors"
14
15// Parentheses around the condition are optional but add clarity
16let score = 85;
17let grade = score >= 90 ? "A" : "B";
18console.log(grade); // "B"

Ternary Operator Components

  • Three operands - A condition, a value to return if true, and a value to return if false.
  • Returns a value - The whole expression evaluates to one of the two values, which can be assigned or used directly.
  • Expression-based - Can appear anywhere an expression is valid - in assignments, template literals, function arguments, return statements.
  • Short-circuit evaluation - Only one branch is evaluated - if the condition is true, the false branch never runs.

Ternary Operator Syntax

Because the ternary is an expression rather than a statement, it fits in places where if-else doesn't - inside template literals, as a function argument, in an object property, in a return statement on one line. These are the situations where it genuinely earns its place. It can return any value: a string, a number, an object, a function, even another ternary.

javascript
1// In template literals
2let name = "Alice";
3let isAdmin = true;
4console.log(`Welcome ${isAdmin ? "Admin" : "User"} ${name}`);
5// "Welcome Admin Alice"
6
7// As a function argument
8function greetUser(role) {
9    console.log(`Hello, ${role === 'admin' ? 'Administrator' : 'User'}`);
10}
11greetUser('admin'); // "Hello, Administrator"
12
13// Returning an object
14let userType = "premium";
15let config = userType === "premium"
16    ? { theme: "dark", ads: false }
17    : { theme: "light", ads: true };
18console.log(config); // { theme: "dark", ads: false }
19
20// In array methods
21const numbers = [1, 2, 3, 4, 5];
22const doubled = numbers.map(num => num % 2 === 0 ? num * 2 : num);
23console.log(doubled); // [1, 4, 3, 8, 5]
24
25// Returning a function
26const operation = "add";
27const mathFn = operation === "add" ? (a, b) => a + b : (a, b) => a - b;
28console.log(mathFn(5, 3)); // 8

Where Ternary Expressions Work

  • condition ? - Any boolean expression - comparison, function call, truthy check.
  • true expression - The value returned when condition is truthy. Can be any expression.
  • : false expression - The value returned when condition is falsy. Can be any expression.
  • Inline use - Can be used inside template literals, function calls, object literals - anywhere an expression is valid.

Ternary Operator vs If-Else

The ternary is a tool for expressions, not statements. When you need to choose between two values - what to assign, what to return, what to embed in a string - the ternary is the right choice. When you need to execute multiple statements, run side effects, or handle complex branching, if-else is clearer. The common mistake is using ternary because it looks concise rather than because it fits the situation - a three-line if-else is often more readable than a one-line ternary with complex logic crammed into it.

javascript
1// Good use of ternary: choosing a value
2const age = 20;
3const canVote = age >= 18 ? "Yes" : "No"; // Clean
4
5// Equivalent if-else - more code, no added clarity
6let canVoteIfElse;
7if (age >= 18) {
8    canVoteIfElse = "Yes";
9} else {
10    canVoteIfElse = "No";
11}
12
13// Good use of ternary: return statement
14function getDiscount(isMember, total) {
15    return isMember ? total * 0.1 : total * 0.05;
16}
17
18// Bad use of ternary: multiple statements per branch
19// use if-else here
20const user = { name: "Alice", role: "admin" };
21
22if (user.role === "admin") {
23    console.log("Admin logged in");
24    sendAdminNotification();
25    updateAdminDashboard();
26} else {
27    console.log("User logged in");
28    updateUserActivity();
29}
30// Using ternary here would require comma operators and would be hard to read
31
32// Ternary in object properties
33const isDarkMode = true;
34const theme = {
35    mode: isDarkMode ? "dark" : "light",
36    background: isDarkMode ? "#000" : "#fff"
37};
38console.log(theme.mode); // "dark"

Nested Ternary Operators

Ternaries can be chained or nested when you need to choose among more than two options. The version that reads most naturally is the chained form, where each false branch is another ternary - essentially the ternary equivalent of else if. This works reasonably at two or three levels with line breaks and consistent indentation. Beyond that, a function with a proper if-else chain is almost always clearer. The real risk with nested ternaries isn't that they don't work - they do - it's that they hide logic that should be visible.

javascript
1// Chained ternary - readable with line breaks
2const score = 85;
3const grade =
4    score >= 90 ? "A" :
5    score >= 80 ? "B" :
6    score >= 70 ? "C" : "F";
7console.log(grade); // "B"
8
9// Two-level nesting with clear structure
10const age = 25;
11const hasLicense = true;
12const driveStatus = age >= 18
13    ? (hasLicense ? "Can drive" : "Needs license")
14    : "Too young";
15console.log(driveStatus); // "Can drive"
16
17// Too complex - extract to a function instead
18const user = { role: "moderator", isActive: true };
19
20// Ternary version - hard to read
21const access =
22    user.role === "admin" ? "full" :
23    user.role === "moderator" ? (user.isActive ? "moderate" : "restricted") :
24    "basic";
25
26// Function version - same logic, much clearer
27function getAccessLevel(user) {
28    if (user.role === "admin") return "full";
29    if (user.role === "moderator") return user.isActive ? "moderate" : "restricted";
30    return "basic";
31}
32
33console.log(getAccessLevel(user)); // "moderate"

Useful Ternary Patterns

A few patterns where the ternary genuinely earns its place: pluralization (1 item vs 2 items), conditional class names in template literals, and nullish checks for display values. These are cases where the conditional choice is the whole point of the expression, the logic is simple enough to read inline, and the alternative would be more verbose without being clearer.

javascript
1// Pluralization
2const count = 1;
3const label = `${count} ${count === 1 ? "item" : "items"}`;
4console.log(label); // "1 item"
5
6// Null check for display
7const user = null;
8const username = user ? user.name : "Anonymous";
9console.log(username); // "Anonymous"
10
11// Conditional class names
12const isActive = true;
13const isError = false;
14const className = `button ${isActive ? "active" : ""} ${isError ? "error" : ""}`.trim();
15console.log(className); // "button active"
16
17// Max and min values
18const a = 5, b = 10;
19const max = a > b ? a : b;
20const min = a < b ? a : b;
21console.log(`Max: ${max}, Min: ${min}`); // "Max: 10, Min: 5"
22
23// Conditional in array map
24const numbers = [1, 2, 3, 4, 5];
25const labeled = numbers.map(n =>
26    n % 2 === 0
27        ? { value: n, type: "even" }
28        : { value: n, type: "odd" }
29);
30console.log(labeled[0]); // { value: 1, type: "odd" }
31
32// Simple validation message
33const email = "";
34const validationMsg =
35    !email ? "Email is required" :
36    !email.includes("@") ? "Invalid format" :
37    "Valid";
38console.log(validationMsg); // "Email is required"

Common Ternary Mistakes

The most common mistake is using ternary for side effects - things like console.log calls or database updates - rather than for values. It works technically, but it's not what the operator is designed for and it reads poorly. The second most common is deep nesting without formatting, which produces a wall of question marks and colons that nobody can follow on a quick read. The false-positive issue with || vs ?? is also worth watching: || returns the right side for any falsy value including 0 and empty string, while ?? only activates for null and undefined.

javascript
1// WRONG: ternary for side effects - use if-else
2// isLoggedIn ? showDashboard() : redirectToLogin(); // Avoid
3
4// RIGHT: ternary for values
5const view = isLoggedIn ? "dashboard" : "login";
6
7// WRONG: deep nesting without formatting - unreadable
8// let r = a === 1 ? "A" : a === 2 ? b === 1 ? "B1" : "B2" : "C";
9
10// RIGHT: formatted, or extracted to a function
11const result =
12    a === 1 ? "A" :
13    a === 2 ? (b === 1 ? "B1" : "B2") :
14    "C";
15
16// WRONG: || catches falsy values you might want
17const score = 0;
18console.log(score || "No score"); // "No score" - but 0 is a valid score
19
20// RIGHT: ?? only catches null/undefined
21console.log(score ?? "No score"); // 0 - correct
22
23// WRONG: operator precedence without parentheses
24const x = 5, y = 10;
25// let r = x > y ? "Bigger" : "Smaller" + " than y"; // Confusing
26
27// RIGHT: parentheses for clarity
28const clear = x > y ? "Bigger" : ("Smaller" + " than y");
29
30// WRONG: inconsistent return types
31const bad = condition ? "string" : 42;
32
33// BETTER: consistent types
34const good = condition ? "Yes" : "No";

Ternary Best Practices

The core guideline: use ternary when you're choosing between two values, use if-else when you're executing different blocks of logic. Ternary shines in return statements, template literals, object properties, and array callbacks where inline expressions are expected. Keep conditions simple enough to read without stopping - if you have to re-read the condition twice to understand it, that's a signal to extract it to a named variable or use if-else. And when nesting, format with consistent line breaks so the structure is visible at a glance.

javascript
1// Simple value assignments - ideal for ternary
2const isAdmin = true;
3const welcomeMsg = isAdmin ? "Welcome Admin" : "Welcome User";
4
5// Return statements - ternary is natural here
6function getPriceLabel(price) {
7    return price > 100 ? "Expensive" : "Affordable";
8}
9
10// Named condition for complex logic
11const isEligible = age >= 18 && hasId;
12const eligibilityStatus = isEligible ? "Eligible" : "Not Eligible";
13// Better than: age >= 18 && hasId ? "Eligible" : "Not Eligible"
14
15// Template literals - ternary fits naturally
16const itemCount = 3;
17const msg = `You have ${itemCount} ${itemCount === 1 ? "item" : "items"}`;
18console.log(msg); // "You have 3 items"
19
20// Array callbacks - inline ternary is common and readable
21const nums = [1, 2, 3, 4, 5];
22const processed = nums.map(n => n % 2 === 0 ? n * 2 : n);
23
24// Nullish coalescing instead of ternary for null checks
25const userName = null;
26const display = userName ?? "Guest"; // Cleaner than userName ? userName : "Guest"
27
28// Limit nesting and format clearly
29const score = 85;
30const grade =
31    score >= 90 ? "A" :
32    score >= 80 ? "B" :
33    score >= 70 ? "C" : "F";
34// Each level on its own line makes the structure readable

JavaScript Ternary Operator FAQ

What is the ternary operator in JavaScript?

A conditional expression that evaluates a condition and returns one of two values. Syntax: condition ? valueIfTrue : valueIfFalse. It's the only JavaScript operator that takes three operands, which is why it's called ternary.

When should I use ternary vs if-else?

Use ternary when the goal is to choose between two values - for an assignment, a return statement, or an inline expression. Use if-else when you need to execute multiple statements, handle side effects, or when the logic is complex enough that the inline form would be hard to read.

Can ternary operators be nested?

Yes, and it's reasonable at two or three levels with proper formatting - each level on its own line with consistent indentation. Beyond that, a function with a standard if/else-if chain is almost always clearer. The issue isn't correctness, it's readability.

Does the ternary operator short-circuit?

Yes. Only one branch evaluates - the true branch if the condition is truthy, the false branch if it's falsy. The other branch is never evaluated. This matters if a branch has a function call with side effects or an expensive computation.

What's the precedence of the ternary operator?

Lower than most other operators, including arithmetic and comparison. This means conditions involving && or || should be wrapped in parentheses to ensure they evaluate before the ternary decides which branch to take. When in doubt, add parentheses.

Can I use a ternary without assigning to a variable?

Yes - the ternary is an expression and can appear anywhere an expression is valid. console.log(age >= 18 ? 'Adult' : 'Minor') works. Using it purely for side effects without capturing the value is technically valid but unusual and typically harder to read than an if statement.

What happens if I forget the colon?

SyntaxError. All three parts are required: the condition before ?, the true expression between ? and :, and the false expression after :. The parser won't accept a ternary with only two parts.

Can I put multiple expressions in one branch?

Using the comma operator you can evaluate multiple expressions in one branch, but the ternary returns only the last one. This is generally confusing and rarely the right approach. If a branch needs multiple operations, use if-else.

Is ternary faster than if-else?

No meaningful difference in modern JavaScript engines. Both compile to similar bytecode. Choose based on readability - performance is not a factor in this decision.

What are good alternatives to ternary?

For null and undefined checks, nullish coalescing (??) is often cleaner than a ternary. For boolean defaults, logical OR (||) works though it activates on all falsy values. For mapping a fixed set of keys to values, an object lookup can be more readable than a chain of ternaries or if-else-if. Each has its place depending on what you're actually trying to express.