Ternary Operator Playground

The ternary operator (? :) is a concise conditional operator in JavaScript that takes three operands: a condition, a result for true, and a result for false. It's the only JavaScript operator that takes three operands, hence the name "ternary." It's effectively a shorthand for if-else and is often used for simple conditional assignments. Syntax: condition ? exprIfTrue : exprIfFalse.

Use the ternary operator for simple, single-line conditional assignments where readability is improved. For multi-statement branches or complex logic, stick with traditional if-else blocks. Ternary shines in template literals, JSX in React, and inline expressions where brevity matters. Avoid nesting more than 2 levels deep — it quickly becomes unreadable.

Nesting allows chaining multiple conditions. For example: num > 0 ? 'Positive' : num < 0 ? 'Negative' : 'Zero'. The ternary operator is right-associative, meaning it evaluates from right to left. This behaves like an if-else if-else chain. However, deeply nested ternaries harm readability — consider using switch statements or if-else chains for complex branching.

The ternary operator has very low precedence — lower than most operators like +, -, *, comparisons, and logical operators. Only the comma operator and assignment operators have lower precedence. This means conditions like a + b > 10 ? 'yes' : 'no' work as expected without extra parentheses. However, when mixing with other low-precedence operators, adding parentheses improves clarity.

Absolutely! Combining ternary with optional chaining is powerful: user?.name ? user.name : 'Anonymous'. The ?. safely accesses nested properties without throwing errors if intermediate values are null/undefined. Paired with the ternary operator, you get clean, safe property access with fallback values — a common pattern in modern JavaScript and TypeScript.

Performance differences between ternary and if-else are negligible in modern JavaScript engines. Both compile to similar bytecode. Choose based on readability and maintainability, not micro-optimizations. For simple value assignments, ternary is often more elegant; for multi-step logic, if-else is clearer. The V8 engine optimizes both equally well.

Yes, you can call functions in both the true and false branches: isLoggedIn ? showDashboard() : redirectToLogin(). However, only one branch executes — the ternary short-circuits, evaluating only the relevant expression. Be cautious: placing side-effect-heavy function calls inside ternaries can reduce readability. For multi-statement side effects, if-else is usually clearer.

The ternary operator is right-associative. a ? b : c ? d : e is parsed as a ? b : (c ? d : e), not (a ? b : c) ? d : e. If you expect left-to-right evaluation, use explicit parentheses to clarify intent. Misunderstanding associativity is the most common source of bugs with nested ternaries. When in doubt, add parentheses or refactor to if-else.