Cover image by Talles Alves on Unsplash
Internet wisdom says that nested conditional operators are evil. And I firmly believed internet wisdom until today.
Today I found myself refactoring some old Javascript code and it had one of those functions that validate that a heckload of properties exist and have the right format in an object. Then I went crazy and wrote something similar to this.
const validateInput = ({ field1, field2, field3 }) =>
(!field1
? Promise.reject('Missing field1')
: !Array.isArray(field2)
? Promise.reject('field2 is not an array')
: !isValidType(field3)
? Promise.reject('field3 is invalid')
: Promise.resolve()
)
Don't mind the thing with promises, this function is used inside a promise chain.
The thing is, it makes me cringe a bit because, you know, nested conditional operators are evil, but I actually find it readable, and I'd say it might even flow better than the chain of ifs.
I would like to read your thoughts and opinions in the topic. Are nested conditional operators inherently evil and unreadable or are they alright, they have just been used in a messy manner for too long?
Top comments (48)
I think nested anything is evil. So I prefer to call them Chained Conditional Operators. Kinda like promise chaining.
For a chained conditional operator, I prefer this style syntax, with the condition on the left and the action on the right.
Then it looks similar to an
if
or a
switch
I prefer the chained conditional operator because it a function expression, compared to the others which are functions with block statements. I also really like the way it looks.
Cheers!
Thanks for your input! I didn't know you could use switch that way! 😮
You shouldn't, but you can 😉
I don't think I've written a single switch statement since I left the Javaland, so nothing to worry about.
I wanted to suggest that way too but am on mobile 😁
Why shouldn't you?
And now I'm at a PC
I would take a similar route though I'd use
false
as the switch argument. Remember switch statements areif(x === y )
as opposed toif(x == y )
so we can't use truthy/falsey.In order to make it work, I'd have a simple truthy to bool converter function. It takes up a bit of space but I think it's very readable.
You could also replace your custom
toBool
function with the built-inBoolean
constructor.Oh wow, I honestly didn't know that existed. It looks like it does the exact same thing as
!!
so would be a great replacement.@skaterdad @link2twenty the
Boolean
function not theBoolean
constructor. The difference is important becauseAnd not even
Boolean(new Boolean(''))
will save you.You'd have to go full
(new Boolean('')).valueOf()
to learn the truth.(As opposed to
String(new String(true))
andNumber(new Number('2'))
which do manage to extract the primitive value.)I leave you with this:
Bet you won't guess the result of the last two without evaluating :v
@joelnet Why shouldn't you use
switch(true){case binaryexp: return stuff}
? It's the same control flow asif(){} else if(){} else if(){}
or if you are always returningif() return; if() return; if() return
. What could go wrong? Fallthrough?When given multiple ways to write something, I always prefer writing an expression over statements.
So I wouldn't use a
switch
or anif
when I could use aternary
I bet you're all about those throw expressions, aren't you? ;)
Hmm. Well, I have used function expressions to throw, so this would be an improvement.
But since we're on the subject of Exception, I'll use this opportunity to rant about Exceptions.
Unless your intent is to halt the program, an Exception should not be thrown.
If your function can result in an exception, return it. This would follow a similar pattern as Promises.
And also similar to a callback:
Example:
The benefits are:
Yeah,
Result<Err, Val>
is an awesome datatype, but it's not the norm in JS, unfortunately.How great would
Promise<Err, Val> = Future<Result<Err, Val>>
be :)Instead, they integrated with exceptions, which makes
throw
ing inside anasync
function great, but makesawait
ing a fallible promise pretty ugly.That's the difficulty is going opposite of the norm. It really works out well when your entire application is designed that way, but can be odd when you inject it into an existing application.
Consistency across the application is more important. So I will do these things with a new app, but code in the same style as existing apps just for consistency.
Look what I found.
This guy knows what up ;)
I like using short-circuiting for things like that instead. With the nested ternary its hard to see what part is in what part.
But that function doesn't return anything, how do you get a return value?
I didn't actually read your function that carefully, but since it looks like it either rejects or does a
Promise.resolve()
then just at the end addreturn Promise.resolve()
since nothing seems acted upon.I'm sorry but I still don't get how this is supposed to work. The statement
field1 || Promise.reject(...)
will not make the function return, so it will returnPromise.resolve()
every time.I can see it working if you wrap the body in a new promise
But I'm not sure this conveys the intent as clearly as a chained conditional operator or if statements.
I like this much more than nested conditions. And if used appropriately, it's better than my example. It's important to find the right use for each situation.
I didn't test my code at all and assumed we were doing a basic javascript styled pseudo-code thing here. My bad.
I assumed that basically what you just posted is what we had but we weren't showing the promise set up stuff, just the helper function. But yeah, the example you posted now is what I was going for more or less.
I think the nested ternary is super hard to read, and this is easier, though the use of the short-circuit like this is not a standard thing people do, I've found that people come to like it once they get used to it.
This all said, Typescript could remove the need for all the validation entirely.
Javascript pseudocode is fine, I kept asking because I didn't understand the intent of your code, not because it didn't work.
But yeah, the validations are not important, what I wanted to discuss is the construct in general, my particular case was just an example, so thanks for your input!
In my opinion the main problem in this particular case is not the tenary operator - it's the ugly code that results from the violation of the DRY principle at the "error throwing".
Let's break this down a bit:
Why don't you just tell your program exactly this idea?
"I validate a field" becomes a function, that rejects a Promise on error, or resolves it if everything is fine:
Now we can set a condition and get a resolved / rejected Promise back - we just need to execute all of them (with Promise.all) and use the overall success as indicator, that all validation was successful:
I think that this increases readability by several levels and tells us on the first glance, what it's doing. You might even add other fancy stuff in the "validateField"-Function, which applies to all validations, or you can use the "validateField"-part without calling the validateForm-Function.
I think if I found your piece of code, I would've refactored it like that and I can imagine, other places where "multiple" tenarys would be needed can be refactored like that as well.
What do you think about this attempt?
validateField
seems reasonable, but I am not sure why it is asynchronous. All of the field information seems to be available as-is, so it looks as thoughvalidateField
andvalidateInput
could be simplified:Also, I'm not sure why there are negations in
!!field1
and!isValidType(field3)
.I just made it async, because I was too lazy to write new Promise bla (async always returns a Promise). Also I used Promise.all because I guessed that Avalander had some fancy async validation stuff going on.
!!field1 casts a value to a boolean (a bit hacky, I know 😉 Just wanted to point out, that someone should provide a boolean value).
!isValidType is taken from the original post - of course non-negated conditions should be preferred.
Yeah, let's not forget that the code I posted is a simplification of the real problem, but we can ignore the asynchronous part, I just wanted to discuss the chained conditional operators.
Using
Promise.all
is a very interesting approach, I like it.I think the fact that the design of a conditional (especially ternary) is not restrictive says nothing of how it is used. I find in most cases where I desire to write less code, that using a normal if conditional is actually better even if it promotes greater nesting.
I have been developing more classic writing habits of late though, so take that with a grain of salt? I prefer conditionals with closure to support flexible scope without rewriting anything, and they clearly define line-breaks. My writing preference of your function would look something like this (I don't fully understand Promises yet):
Taking a look at your function, for example; I would write this as separate conditional checks because they are not related to one another. This is a pattern I find useful when designing other functions, often I only want to check for a single condition, not a chain of if/else conditions. In this function, you only want to return a rejection if a field fails a conditional check. Try to think of it as 'If this is true than do this', not 'if this is true do this, otherwise check for these things and do this'.
This is what the if/else would look like using normal conditionals.
As for ternary conditionals, I only ever write them inline for simple checks and I have read and agree that they should not be nested more than 1-2 levels.
I think that if I were to run across this while digging through code, I would be much happier to just see
If definitely doesn't win any code golf or cleverness competitions, but it imposes an absolute minimum of cognitive load on someone passing through the code.
Prettier formats it like that:
Looks okay to me.
This looks a bit more readable to me, but that's just habit, I guess:
It seems verbose to have to do if... return.. for each one, but I find this much more readable.
If you want to write this style of code, I'd prefer using cond from
lodash
which reimplementscond
from Lisp.Edit: didn't realise it was an object, not an array.
Could even do something like this:
This is a great suggestion, I actually ended up doing something similar with Ramda's cond
Indentation that follows the level of nesting would help me understand what is happening:
I'm not sure I got the evaluation order right, and I'd be suspicious about it in somebody else's code. Usually I'd use parentheses to make sure, but that might make it less readable with a lot of nesting.
I like multiple conditionals, but I make sure to keep some sort of nesting and breaking strategy to keep it readable. Innately, I can't think of a reason not to use nested other than readability, so if future you will still know what it does, go for it!
Most likely, I would have written that as
Whatever way works for you to see the ifs and elses without hunting for them.
Personally, I find chaining ternary expressions like this far more readable than a bunch of if statements :) There's actually a great article on this subject worth reading: medium.com/javascript-scene/nested...