How to use shorthand for if/else statement in JavaScript

# Use shorthand for if/else statement in JavaScript

Use the ternary operator to use a shorthand for an if/else statement.

The ternary operator starts with a condition that is followed by a question mark ?, then a value to return if the condition is truthy, a colon :, and a value to return if the condition is falsy.

Copied!
const result1 = 10 > 5 ? 'yes' : 'no';
console.log(result1); // 👉️ 'yes'

const result2 = 10 > 100 ? 'yes' : 'no';
console.log(result2); // 👉️ 'no'

We used the ternary operator as a shorthand for an if/else statement.

If the condition gets evaluated to a truthy value, the value before the colon : gets returned, otherwise, the value after the colon gets returned.

The falsy values are: false, null, undefined, 0, "" (empty string), NaN (not a number).

All other values are truthy.

An easy way to think about the ternary operator is:

• the value before the colon is your if block
• the value after the colon is your else block

# Calling functions in a ternary operator

Here is a more complex example.

Copied!
function sum(a, b) {
  return a + b;
}

const result = sum(10, 10) > 1 ? sum(5, 5) : sum(1, 1);

console.log(result); // 👉️ 10

We can use expressions to calculate the return value of the ternary operator.

# Interpolating strings using a ternary operator

A very common use case is to use the if/else shorthand when interpolating strings.

Copied!
const color = 'green';

const str = `color is ${
  color === 'blue' ? 'blue-100' : 'red-100'
}`;

console.log(str); // 👉️ 'color is red-100'

In this example, we used the ternary operator in a template literal.

The dollar sign and curly braces ${} mark an expression that gets evaluated.

We check if the color variable is equal to blue and since it isn't, the value after the colon gets returned from the ternary operator and interpolated in the string.

# Checking if an array contains elements using ternary operator

Another very common use case for the ternary operator is to check if an array contains at least 1 element.

Copied!
const result = [].length ? 'contains elements' : 'is empty';

console.log(result); // 👉️ is empty

We access the length property on an empty array and it returns 0.

0 is a falsy value, so the value after the colon gets returned from the ternary operator.

# Using nested ternary operators

You might come across nested ternary operators, even though nested ternaries are less readable than multiple if/else statements.

Here's an example of a nested ternary.

Copied!
const result = 1 + 1 === 2 ? (2 > 0 ? 'yes' : 'no') : 'idk';

console.log(result); // 👉️ yes

The condition (before the ?) gets evaluated and it returns true.

Then the part before the colon gets evaluated - another ternary.

The nested ternary gets evaluated and it also returns true, so the part of the nested ternary before the colon gets returned.

I'm not a big fan of nesting ternary operators, however, there are a couple of use cases where you might need them, e.g. in React.js components.

Here is the if/else implementation of the nested ternary from the example above.

Copied!
let result;

if (1 + 1 === 2) {
  if (2 > 0) {
    result = 'yes';
  } else {
    result = 'no';
  }
} else {
  result = 'idk';
}

console.log(result); // 👉️ yes

Nested if/else statements are not as concise, however, they are a bit more readable.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Count Elements in an Array that match a Condition using JS
• Filter an Array with Multiple Conditions in JavaScript
• Find the First Array Element matching a Condition in JS
• Use multiple conditions with querySelectorAll in JavaScript
• Specify multiple conditions in an if statement in JS