Javascript shorthand for if/else statements explained

If you’re looking for Javascript shorthand for if/else statements, you’re probably looking for the ternary – a.k.a the conditional – operator.

🎧 Debugging Jam

Calling all coders in need of a rhythm boost! Tune in to our 24/7 Lofi Coding Radio on YouTube, and let's code to the beat – subscribe for the ultimate coding groove!" Let the bug-hunting begin! 🎵💻🚀

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

Psssst! Do you want to learn web development in 2023?

It's not too late! Read these first:

• How to become a web developer when you have no degree
• How to learn to code without a technical background
• How much do web developers make in the US?

The expression on the left side of the colon will be executed if the condition is true (or more precisely truthy). But if the condition is false (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 a JavaScript if/else statement, 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 blocks.

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 the ternary operator in JavaScript

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

Sometimes a simple 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 latter 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 a simple Javascript if statement.

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

Thanks for reading.

Reza Lavarian 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: @rezalavarian