DEV Community

Ternary Operators In JavaScript

David Okpare on August 27, 2018

Are you tired of repeating yourself while coding? Do you still use the traditional ‘if…else’ blocks? What if I told you, you could write 15 lines o...
Collapse
 
mjworsley profile image
mjworsley

While coding, one of the key things I try to aim for is readability and maintainability - after all, the interpreter or compiler doesn't really care how many lines you've used, but you will care when you try to read it again 6 months later.

In my experience, the ternary operator prioritizes brevity over readability. If we take this to its logical extreme, we'd be naming all our variable 'a1', 'a2' etc...

Collapse
 
mrlarson2007 profile image
Michael Larson • Edited

I have the same feelings. I limit use of ternary operators where it makes sense to use them. Most of the time I use if statements. Reason? I want to opitimize for readability not brevity.

Collapse
 
swapnil7000 profile image
Swapnil7000

I have also written a blog on ternary operators please give your reviews on it.

Collapse
 
puritanic profile image
Darkø Tasevski

Ternary operators are not a shortcut nor replacement for If/else statements. Ternaries are okay when you need to return something based on condition, and you want to write it as oneliner. They are okayish in React too (as we can't use if/else in jsx). Besides this ternaries can get hard to read and hard to maintain pretty fast, so I think that overusing them would be a really bad idea.
There's even Eslint rule for disallowing nested ternaries 🙂

In the end, it's only important that a programmer knows what syntax to use in what situation.

Collapse
 
iandavid profile image
David Okpare

Yes, you're absolutely right! The article wasn't meant to "replace if statements", but shed light on it being a possible option for using conditional operators :) And thanks for highlighting the fact that it shouldn't be overused. I have included it in the post

Collapse
 
alainvanhout profile image
Alain Van Hout

There is a big difference between concise code and dense code. Widespread usage of ternary operators more often leads to the latter, which has a very detrimental effect on code maintainability.

Writing less characters isn't the same as writing better code.

Collapse
 
thomasjunkos profile image
Thomas Junkツ

But both sets overlap ;)

Collapse
 
alainvanhout profile image
Alain Van Hout • Edited

Only to a limited degree. The techniques tend to be quite different. In most cases, concise code involves a meticulous architecture, while dense code involves syntactical tricks.

Or to put it in another way: concise code is thoughtful, while dense code is 'clever' <shudder>.

Their respective goals are also quite different. Concise code optimizes for less logic and more semantics, while dense code optimizes purely for less characters and/or lines.

Collapse
 
thomasjunkos profile image
Thomas Junkツ • Edited

Ternaries as shown here are mostly fine.

I use them mostly to provide variables with (default) values which come in a binary flavor.

For functions I prefer


chrisPratt = (marvel)=>{
if(marvel) return "I am Star-Lord!";
return "Have you watched Guardians of the Galaxy?";
};

because your eyes rest on the condition and it is easy from that to look at the non matching case.

But I admit, this has more to do with personal taste ;)

You should add a warning sign not to overuse ternaries, esp. start nesting those guys. This could end up pretty nasty.

Collapse
 
iandavid profile image
David Okpare

Thanks for highlighting it. I have included it in the post.