How to use shorthand for if/else statement in JavaScript

avatar

Borislav Hadzhiev

Sun Dec 05 20213 min read

banner

Photo by Dikaseva

Use shorthand for if/else statement in JavaScript #

To use a shorthand for an if else statement, use the ternary operator. 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.

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

In the examples, 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 parenthesis 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.

Truthy values in JavaScript are all values that are not falsy.

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

If the condition evaluates to any other value, the value before the colon gets returned from the ternary operator.

An easy way to think about it is:

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

Here is a more complex example.

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

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

In this example, the condition returns true and the function to the left of the colon gets executed and it's value is returned from the operator.

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

index.js
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 a 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 variable color 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.

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

index.js
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.

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

You might come across nested ternary operators, even though it is less readable than multiple if else statements.

Here's an example of a nested ternary.

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

Our 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 before the colon on the nested ternary 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.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee