Javascript if/else shorthand explained (with common uses cases)

A person sitting on a red carpet sorting Jenga bricks into its box.
Photo by Ketut Subiyanto, source: Pexels

How to write the shorthand of if/else statements in JavaScript?

If you’re looking for the shorthand of if/else in JavaScript, you need to use the ternary – a.k.a the conditional – operator.

The ternary operator takes three operands: a condition followed by a question mark (?), and two JavaScript expressions separated by a colon (:). 

The expression on the left side of the colon will be executed if the condition is truthy. But if the condition is falsy, the right-side expression will be executed:


condition ? exprIfConditionIsTruthy : exprIfConditionIsFalsy

The result of a ternary operator can be assigned to a variable, and used in another expression. You can also use it when returning a value in a function.

Let's see some use cases.

Initializing variables: The most common use case of ternary operators is initializing variables:


let backgroundColor = isChrismas ? 'red' : 'yellow'

With an if/else, you'd achieve the same thing like so:


let backgroundColor = ''

if (isChristmas) {
   backgroundColor = 'red'
} else {
  backgroundColor = 'yellow'
}

Not bad either.

Ternary operator in functions: You can use the ternary operator to return a value from a function.

The following function determines whether a number is even or not:


function isEven  (value) {
   return value % 2 === 0 ? true : false
}

Ternary operator in strings: You can also use the ternary operator when generating strings:


let greeting = 'Welcome dear ' + user ? user.name : 'user'

In the above example, if the user is authenticated, we'll greet them by name, otherwise 'Welcome dear user' would be displayed.

Ternary operators can be nested

The ternary operator is right-associative, meaning it can be nested - just like having consequent if/else statements.

On the other hand exprIfConditionIsTruthy and exprIfConditionIsFalsy operands can be a ternary operator:


let someVariable = condition1 ? value1 
: condition2 ? value2
: condition3 : value 3 : value 4

Readability of shorthand if/else in JavaScript

Even though the ternary operator is short and sweet, it doesn't make if/else statements a bad choice.

Sometimes an if/else statement is more readable than a ternary operator, regardless of the number of lines.

Which one would you choose for nested conditions:

The ternary apporach


function someFunction() {
    return condition1 ? value1 
        : condition2 ? value2 : value3
}

The if/else approach:


function someFunction () {
    if (condition1) {
        return value1
    } else if (condition2) {
        return value2
    }

    // If none of the above are truthy
    return value3
}

Although the if/else approach needs a few more lines, it's closer to human language. As a rule of thumb, the ternary operator is handy for one-liners. For other flow control scenarios, use if/else.

Alright, I think that does it for today! I hope you found this quick guide helpful!

Thanks for reading.

Author photo

Hey 👋 I'm a software engineer, an author, and an open-source contributor. I enjoy helping people (including myself) decode the complex side of technology. I share my findings on Twitter: @lavary_

If you read this far, you can tweet to the author to show them you care. Tweet a Thanks

In this article:

Disclaimer: This post might contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.