Ternary Operations: the 1+ Line If/Else Statement

#javascript #tutorial #beginners

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

The code above can be transformed into the following ternary:

X ? A : B

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

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))

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

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

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!