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)
🦄: Like your post please continue this series!
Let's vote! 😊
Photo by Science in HD on Unsplash
Top comments (36)
There's a reason there are eslint rules banning nested turnaries 🤮
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:
What I don't like is mix-and-match. If you are using comparisons with multiple branches, be sure to use
switchorif-else, but don't mix between them, as it reduces readability.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:
But even if I prettify it with Black I get this:
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
ifare conditions and all lines starting withelseare result expressions - so it's still readable.It's JS, not C, and the secret to reading it is in the rythm:
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.
Rust is a different story. It's not a ternary conditional operator there - it's a full blown
ifexpression and any prettifier would format it with proper indentations: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.
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.
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.
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
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!! 😎
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.
I totally agree!
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.
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
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?
(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.
You know it's called the conditional operator, right? It just happens to be a ternary operator (one that takes 3 operands)
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?
Yes, I'm a hoot at parties! 😋
Don't forget to vote on your way out 😉
I just love it when I make mistakes ☺️ means I've learned something 😎
Hah good one, thanks
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.
Definitely commit. It looks a bit weird when you're not used to seeing it, but otherwise it looks ok :D
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
Good point
Using nested conditional operator is a federal crime. We should call the FBI.
Your polling strategy is flawed: that is so bad I don't want it appearing in my reading list 🤮
You make a good point, but unicorns don't vomit, any ideas? 😉
Nay, looks ugly and unreadable to me!
🏷 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.
🤮
🤮 🤮 🤮 🤮 🤮 🤮
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.