What is the ternary operator and how do I use it?
JavaScript's ternary operator (?:
), also called the conditional operator, is used to replace a conditional statement, most commonly an assignment. For example:
// Code using if...else let x; if (someCondition) { x = 10; } else { x = 20; } // Same result using the ternary operator const x = someCondition ? 10 : 20;
As you can tell from the above example, the ternary operator is shorter than using an if...else
statement and allows us to assign the resulting value to a variable, provided the condition is pretty much a one-liner. A useful result of this is that we can use the ternary operator for arrow functions with implicit returns:
// Code using if...else const conditionalX = (condition, x) => { if (condition) return x; else return x + 5; } // Same result using the ternary operator const conditionalX = (condition, x) => condition ? x : x + 5;
Note, however, that nesting ternary expressions is usually discouraged with ESLint even going as far as having a dedicated rule for this kind of situation. Additionally, the ternary operator is a favorite of React developers, as it allows for easy conditional rendering in JSX code:
const ItemListTitle = (count) => ( <h3>Item list{ count ? (<span> - {count} items</span>) : '(Empty)'}<h3> );
Finally, you might be wondering why it's called the "ternary" operator. The word "ternary" is based on the n-ary word setup and means an operator with three operands (condition, expression to execute if truthy, expression to execute if falsy).