DEV Community

Cover image for Javascript if/else shorthand explained (with common uses cases)
Reza Lavarian
Reza Lavarian

Posted on • Originally published at decodingweb.dev

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

Update: This post was originally published on my blog decodingweb.dev, where you can read the latest version for a 💯 user experience. ~reza

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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

let backgroundColor = ''

if (isChristmas) {
   backgroundColor = 'red'
} else {
  backgroundColor = 'yellow'
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

let greeting = 'Welcome dear ' + user ? user.name : 'user'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

❋ The if/else approach:

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

    // If none of the above are truthy
    return value3
}
Enter fullscreen mode Exit fullscreen mode

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.


❤️ You might like:

Top comments (0)