Ternary operator

In addition to if-else and switch, there is a third way to write conditional logic. This is called the ternary operator. It is basically a shorthand, one line if-else statement. The actual operator is just a question mark. Let's take a look at the syntax

condition ? true : false;

First, we have the condition to be evaluated as a boolean. Then we have a ?, which is the ternary operator and after that is the expression that we want to happen if the condition is true. The : is the else. So the expression after that will execute if the condition is false.

Let's look at a simple if-else statement:

const age = 19;

if (age >= 18) {
  console.log('You can vote!');
} else {
  console.log('You can not vote!');
}

// You can vote!

We can do the same thing using the ternary operator:

age >= 18 ? console.log('You can vote!') : console.log('You can not vote!');

// You can vote!

Assigning result to a variable

In many cases, we want to store the result of the ternary operator in a variable.

const canVote = age >= 18 ? 'You can vote!' : 'You can not vote!';

console.log(canVote); // You can vote!

This is much more compact than this:

let canVote;

if (age >= 18) {
  canVote = 'You can vote!';
} else {
  canVote = 'You can not vote!';
}

console.log(canVote); // You can vote!

Multiple statements

In most cases, you will just have a single expression in the true/false part of the ternary operator, however you can have Multiple statements by using a comma.

const auth = true;

const redirect = auth
  ? (alert('Welcome To The Dashboard'), '/dashboard')
  : (alert('Access Denied'), '/login');

console.log(redirect);

In the case above, it will alert and then return the last value in the ternary.

Multiple Ternary Operators

We can also have multiple ternary operators and conditions. Much like an else-if.

const canDrink =
  age >= 21
    ? 'You can drink!'
    : age >= 18
    ? 'You can have 1 beer'
    : 'You can not drink';

console.log(canDrink);

Using && as a shorthand

If your else(semi-colon) in a ternary is going to be null or you don't need an else, you can use the && operator instead. Here is an example:

auth ? console.log('Welcome to the dashboard') : null;

We could just do:

auth && console.log('Welcome to the dashboard');

This is the same as:

if (auth) {
console.log('Welcome to the dashboard');
}

Using the && operator as a shorthand is a popular thing to do in React templates. Many times, you will see something like:

{!loading && (
  <Fragment>Some UI</Fragment>
)}

Which is saying if done loading, then load the JSX fragment.