## DEV Community

🐤🥇 Jasper de Jager

Posted on

# The ternary operator

It's a delight to use them but should we use them as much as possible? what do you think about the next example? ✔||🤢

``````H = (C == 0 ? null :
V == r ? (g - b) / C :
V == g ? (b - r) / C + 2 :
(r - g) / C + 4
);
``````

#### nested ternary operators ✔||🤢?

❤: Commit (I'd commit something like this)
🏷: Vomit (we all know unicorns don't vomit)

Let's vote! 😊

Photo by Science in HD on Unsplash

Jack

There's a reason there are eslint rules banning nested turnaries 🤮

Alex Lohr

I find the readability of the ternary operator depends very much on the formatting. The default settings of prettier pretty much nails it - here's a rendition of your code:

``````H = C == 0
? null
: V == r
? (g - b) / C
: V == g
? (b - r) / C + 2
: (r - g) / C + 4;
``````

What I don't like is mix-and-match. If you are using comparisons with multiple branches, be sure to use `switch` or `if-else`, but don't mix between them, as it reduces readability.

Idan Arye

How is this formatting better than the original? The original is organized like a table, where the first column is the variable that accepts the result (only has a value in the first row, but that's fine), the second is the condition (which is empty for the last row, meaning "no condition - if all previous conditions were false) and the last is value.

This formatting, on the other hand, provides no hints regarding the role of each expression - they all start in the same column. Initially it may look like lines starting with `?` are conditions and lines starting with `:` are result expressions, but this is not true for the last line. And yes, this is a property of the language's syntax, not the formatting, but OP's formatting was able to solve this with the tabular design and when the prettier flattened everything that hint was lost.

In this regard, I prefer Python's conditional operator. Manually formatted it looks better than OP's formatting of C conditionals, because I don't need to put lots of space before the last, condition-less result expression:

``````H = None if C == 0 else \
(g - b) / C if V == r else \
(b - r) / C + 2 if V == g else \
(r - g) / C + 4
``````

But even if I prettify it with Black I get this:

``````H = (
None
if C == 0
else (g - b) / C
if V == r
else (b - r) / C + 2
if V == g
else (r - g) / C + 4
)
``````

And yes - just like your prettified C code it is flat, but at least here, thanks to the language's syntax, the structure is clear - all lines starting with `if` are conditions and all lines starting with `else` are result expressions - so it's still readable.

Alex Lohr

It's JS, not C, and the secret to reading it is in the rythm:

``````Q1
? Y1
: N1/Q2
? Y2
: N2;
``````

Once you're used to the pattern, it is more legible than the other version.

That being said, I really like the verbose ternary of Python and Rust. Unfortunately they'll never be supported by ECMAscript.

Idan Arye

Rust is a different story. It's not a ternary conditional operator there - it's a full blown `if` expression and any prettifier would format it with proper indentations:

``````let H = if C == 0 {
None
} else if V == r {
Some((g - b) / C)
} else if V == g {
Some((b - r) / C + 2)
} else {
Some((r - g) / C + 4)
};
``````

Khorne07

The only reason people keep complaining about the readability of nested ternary operators is because they don't use it enough. This example looks quite readable to me and I'll always prefer this way over the verbosity of if - else blocks.

🐤🥇 Jasper de Jager

I can understand that but you don't write code only for yourself so it is interesting to see what others think. I'd rather not use it if it is not common enough.

Khorne07

Fair though, but maybe if more people were using it, it wouldn't have so many people hating it. In my case when I started learning Js I didn't like it too much, I found it unnecessary since you can go with if - else blocks like in other languajes (I came to learn js from C, C++ and C#). But after facing real world codes using this sintax I were forced to learn it and understand it well so now is very natural for me to see and work with nested ternaries, and ended up loving them.

Khorne07

So taking my self by guide, when someone says nested ternaries are hard to understand or using them decrese code readability, my conclusion is that they haven't used ternaries enough, or still don't have enough experience in js, so facing them would be a good way to improve their logic skills and learn a new concise way of write conditional statements blocks

🐤🥇 Jasper de Jager

Yes and that's one thing I'm trying to find out with these series ☺️ is it something That's not ok or just something for the more experienced developer. Your comments help a lot!! 😎

Tom

It's really not about one's ability to read ternaries. It's about code writing/analysing efficiency. Even a senior dev will be disadvantaged by encountering a complex nested ternary because the context is not explicit and they have to spend some time analysing it. These kind of ternaries always come with a large cognitive load. Always value being concise over ~quick~ readability, and your codebase will become a nightmare to maintain.

🐤🥇 Jasper de Jager

I totally agree!

Khorne07

Well that actually depends on the situation. Ternaries are not to include on every conditional situation, that is a horror 😂. I'm just saying that I rather use a nested ternary over an if-else block. If there is no need to use an if-else block, then there shouldn't been any nested ternary there either.

Tom

If you stumble across something like this in a large codebase when you need to get something implemented/fixed quickly, it's a bloody nightmare.

Takes ages to grasp the context of what this kind of code is trying to do. It's always worth putting each sub-condition in a named boolean constant.
e.g. const doesProfileExist = ...

And then using a fail-fast if statement straight after.
e.g. if (!doesProfileExist) return x

cab

So yeah, that code right there is garbage. But IMO that's not because of the nested ternary but because of the naming of your operands. And as @lexlohr said the formatting should also in way that it aids the readability. However, I'm uncertain about the prettier formatting is the way I'd do it. Maybe this is a bit more clear?

``````H = C == 0
? null
: V == r
? (g - b) / C
: V == g
? (b - r) / C + 2
: (r - g) / C + 4;
``````

(aside: my operand naming: `condition ? left : right`)
Becaus the prettier formatting only works that way if the right operand is always the condition for the next ternary. If one would mix this 'rule' it would be more confusing if the nested ternaries would not be indented.

Nevertheless: Only do it when it serves the readability and use proper names for your operands. Then I'm ok with it. Otherwise 🤮

PS: idgaf if you one calls it conditional or ternary. I cannot remember hearing 'conditional operator' in 15 years in several languages.

Jon Randy 🎖️

You know it's called the conditional operator, right? It just happens to be a ternary operator (one that takes 3 operands)

Andrei Dascalu

Hmm, in all languages I know this is the only conditional operator though the common way to name it depends. In Java it's generally the conditional operator while in PHP it's commonly the ternary operator.
But I am really curious, do you know a language where there is another kind of conditional operator that is not a ternary?

Jon Randy 🎖️

Yes, I'm a hoot at parties! 😋

🐤🥇 Jasper de Jager

Don't forget to vote on your way out 😉

🐤🥇 Jasper de Jager

I just love it when I make mistakes ☺️ means I've learned something 😎

🐤🥇 Jasper de Jager

Hah good one, thanks

Renan "Firehawk" Lazarotto

Not only I would vomit on something like this, I'd be sure to vomit on the one that did it in the first place.

𒎏Wii 🏳️‍⚧️

Definitely commit. It looks a bit weird when you're not used to seeing it, but otherwise it looks ok :D

Jan Küster

Please don't do it. It's not only about readable code. What If logic requirements change and you need to o rewrite this... I don't want to be assigned to that kind of job

🐤🥇 Jasper de Jager

Good point

Natalia Asteria • Edited

Using nested conditional operator is a federal crime. We should call the FBI.

Ben Calder

Your polling strategy is flawed: that is so bad I don't want it appearing in my reading list 🤮

🐤🥇 Jasper de Jager

You make a good point, but unicorns don't vomit, any ideas? 😉

Kasper Mróz

Nay, looks ugly and unreadable to me!

Tom • Edited

🏷 If you're working on a large codebase and you don't hate your co-workers. Use a getter with fail-fast if statements. Makes theing super unambiguous and instantly readable.

Dewald Els

🤮

Natalia Asteria

🤮 🤮 🤮 🤮 🤮 🤮

Sam Watkins

It's okay if formatted nicely and the code is clear. However, I tend to avoid ternaries and switch, and stick to regular if/else.