How to use shorthand for if/else statement in JavaScript

Borislav Hadzhiev

Last updated: Jan 10, 2023
3 min


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

const result1 = 10 > 5 ? 'yes' : 'no'; console.log(result1); // ๐Ÿ‘‰๏ธ 'yes' const result2 = 10 > 100 ? 'yes' : 'no'; console.log(result2); // ๐Ÿ‘‰๏ธ 'no'

use shorthand for if else statement

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

The part before the question mark ? is a condition, just like a condition between the parentheses of an if 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.

function sum(a, b) { return a + b; } const result = sum(10, 10) > 1 ? sum(5, 5) : sum(1, 1); console.log(result); // ๐Ÿ‘‰๏ธ 10

calling functions in ternary operator

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

In this example, the condition returns true, the function to the left of the colon gets invoked and its value is returned from the operator.

# Interpolating strings using a ternary operator

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

const color = 'green'; const str = `color is ${ color === 'blue' ? 'blue-100' : 'red-100' }`; console.log(str); // ๐Ÿ‘‰๏ธ 'color is red-100'

interpolating strings using ternary operator

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

We used backticks `` to wrap the template literal, not single quotes.

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.

const result = [].length ? 'contains elements' : 'is empty'; console.log(result); // ๐Ÿ‘‰๏ธ is empty

checking if array contains elements using ternary operator

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.

const result = 1 + 1 === 2 ? (2 > 0 ? 'yes' : 'no') : 'idk'; console.log(result); // ๐Ÿ‘‰๏ธ yes

using nested ternary operators

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.

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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev