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?

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.
Never miss a guide like this!
Disclaimer: This post may contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.