DEV Community

Cover image for Ternary Operations: the 1+ Line If/Else Statement
Spenser Brinkman
Spenser Brinkman

Posted on

Ternary Operations: the 1+ Line If/Else Statement

If/else statements represent one of the purest forms of programming. Logic gates and conditional functionality is often what makes the tech world go 'round. If/else is so ubiquitous and essential to writing effective code that it is often one of the first concepts and syntaxes learned by new programmers and really shouldn't need much explanation here. In contrast, there exists an alternate form of the if/else, often discovered later in one's learning, called a conditional/ternary operator, or simply ternary. Ternaries can be harnessed to write much more concise and elegant code, but not without the risk of over-complicating things if overused.

Take, for example, this bland and reductionist if/else:

if X
  A;
else
  B;
end
Enter fullscreen mode Exit fullscreen mode

The code above can be transformed into the following ternary:

X ? A : B
Enter fullscreen mode Exit fullscreen mode

Much prettier, concise, and some even say more readable! As stated before, care needs to be taken to not overdo it.
Try turning this into a single-line ternary:

if X
  A;
else if Y
  B;
else if Z
  C;
else
  D;
end
Enter fullscreen mode Exit fullscreen mode

Tecnhically, it can be done. I might consider trying to use a case statement instead of turning this into a ternary, or I might even leave it alone, unchanged. But the point of this article is to show that it can be done! Check it out:

X ? A : (Y ? B : (Z ? C : D))
Enter fullscreen mode Exit fullscreen mode

I'd argue that this is not easy to read, and might even be considered 'uglier' code than a traditional if/else. But what if we tried some chaining and formatting magic to make it a bit more readable?

X ? A      // if X is true, do A
: Y ? B    // else if Y is true, do B
: Z ? C    // else if Z is true, do C
: D        // if all else fails, just give up and do D
Enter fullscreen mode Exit fullscreen mode

This is functionally identical to our traditional if/else defined above, but with the added bonus of cutting the number of lines used by more than half, and also finishing with (subjectively) more elegant code.

You can even have multiple actions occur for a condition by separating with commas:

X ? A, C      // if X is true, do A, then do and return C
: Y ? B, D    // else if Y is true, do B, then do and return D
: Z ? C       // else if Z is true, just do C
: D           // if all else fails, give up and just do D
Enter fullscreen mode Exit fullscreen mode

The final action in a comma-separated list will be the returned value of the whole ternary operation.

There are lots of other ways to utilize the ternary operator, with plenty of documentation from MDN to help give you some ideas. The key is to be creative, but don't lose sight of the importance of readability!

Top comments (3)

Collapse
 
jmdejager profile image
🐤🥇 Jasper de Jager

I totally agree, readability is key.
if else statement is also replaceable by a switch statement in some cases 😎

Collapse
 
nqdai1992 profile image
Nguyễn Quốc Đại

I feel the ternary operations with nest conditions are hard to read.

Collapse
 
spenserbrinkman profile image
Spenser Brinkman

Totally agree! I'd choose a regular if/else over nesting ternary operations in most cases.