Javascript shorthand for if/else statements (ternary operator) explained

If you’re looking for a shorthand version of if/else statements 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 (:). 

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

Even though the ternary operator is short and sweet, it doesn't make ordinary 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.

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: @rlavarian