These operators can be further defined as either unary or binary. Let’s break down the difference between these two terms now as we move toward understanding ternary.
A unary operator takes just one operand, either before or after the operator:
operator operand || operand operatorfor example:x++ || ++x
A binary operator requires two operands, the most common examples being basic addition, subtraction, multiplication, and division:
operand operator operandx + y; || x - y; || x * y; || x / y;
Relational, bitwise, equality, and logical operators are also binary:
operand operator operanda few examples (non-exhaustive):x < y; // the less-than relational operator
x << y; // the left shift bitwise operator
x || y; // binary logical operator
x == y; // the equals operator
And that brings us to ternary.
The Ternary Operator
?), then an expression to execute if the condition is truthy, followed by a colon (
:), and finally, the expression to execute if the condition is falsy. — MDN
The syntax is shown below:
condition ? value1 : value2
condition evaluates to true, the ternary operator will have the value of
condition evaluates to false (or falsy), it has the value of
let bouncerReply = (age >= 21) ? 'Access allowed' : 'Access denied';
You can also chain conditional operators:
let message = (tempCelsius > 95) ? 'Too hot!' :
(tempCelsius < 95) ? 'Too cold!' :
(tempCelsius === 95) ? 'Just right!' :
'This isn't porridge!';
- The first question mark checks condition
tempCelsius > 95.
'Too hot!'. If not, check condition
tempCelsius < 95.
'Too cold!'. If not, check
tempCelsius === 95.
- If that’s
true— it returns
'Just right!'. Otherwise, it continues to the expression after the final colon
'This isn't porridge!'.
Should You Use It?
The fact that I felt the need to include an explanation for the above sequence of ternary expressions gives away my answer to this question. Here is what the above code would look like using
Personally, I would recommend defaulting to
if..else statements as opposed to using the ternary/conditional operator. Just my own opinion.
Chaining or nesting ternaries makes the minification they are touted for negligible. Sure, the
if..else example is a few lines of code longer, but it is also infinitely more readable. Leave the minifying to the minifiers.
What’s the Difference?
The ternary operator is not simply a replacement for
The difference is the ternary operator is an expression whereas an
if..else construct is a statement. An expression returns a value, a statement does not.
At the end of the day, use of the ternary operator is a form of syntactic sugar, and as I wrote elsewhere, less code does not always equal more concise code.
Full disclosure, I do use ternary operators in my own code. Almost every instance as single-line variable assignments or simple conditionals. Once a situation would require nested or chained ternaries, I shift to
if..else and that is what I recommend for you as well, dear reader.
I believe readability should always be prioritized when writing code. Bugs often stem from the misunderstanding of previously written code. Your future self will thank you, and so will any devs who work with your code.
Especially when the difference in code length or performance is negligible.
Thanks for reading!