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).

Do you like short, high-quality code snippets and articles? So do we! Visit 30 seconds of code for more articles like this one or follow us on Twitter for daily JavaScript, React and Python snippets! 👨‍💻