How I Format The Conditional Ternary Operator In ColdFusion And JavaScript
I like to keep a very strict code formating guide in my head at all times. For me, consistency is a key factor of success. But, while my mental model is rigid in practice, it is flexible in evolution; I am continually trying to find ways to better format my code. Over the last few months, I have started using - and have come to absolutely love - a new formatting approach for the Conditional Ternary Operator in languages like ColdFusion and JavaScript.
In my current approach, I spread the conditional expression, the truthy expression, and the falsey expression across three lines of code:
| |
|
|
||
| |
 |
|
||
| |
|
|
For me personally, this conditional ternary format leads to improved readability. The visual landscape makes it immediately apparent that I'm dealing with a ternary operator. In the past, my eye would have to scan across a complex expression before I even realized that there was a "?" operator in play. Now, however, the existence of the "?" and ":" tokens becomes immediately apparent, indicating that the first line is actually a "condition" and not an "assignment". This also creates clear differentiation between the truthy expression and the falsey expression.
Sticking to this format has also had the added benefit of curtailing overly-concise code. When I allowed myself to keep the entire conditional ternary operation on a single line, I was able to slip it inline into places like return() statements and function() invocations. Now, however, with the operator spread across three lines of code, it forces me to create intermediary variables which produces more expressive code and requires less cognitive load.
The conditional ternary operator is not a replacement for If/Else control flow. I reserve the use of the ternary operator for simple sets of expressions. Once the expressions start to get complicated, I'll revert to a more standard If/Else block, where I can more clearly pick-apart aspects of the logic.
I will, of course, continue to coarse-correct my approach to code formatting until I am completely happy with it; but, at least for the conditional ternary operator, this feels like the final format. This feels right. It feels easy to explain my choice and reasoning to others.
Reader Comments
Hey Ben, long time no talk (here).
I do the exact same thing. In fact, I align the ? and : with the = as well. And I consistently align all the =, ==, ===, <, <=, >, >=, "is", "is not", "gt", "ge", "lt", "le", etc, mid-line break points so that everything on the right just as aligned as the start-of-line indention.
It minimizes jiggling my eyes left and right as I scan the code vertically.
"A line of code is READ 20 times more often than it's WRITTEN." Or 50 times. Or 37 times. Or some other made up but pretty big positive integer. It's usually bs when you hear a specific number in that sentence. But the fact is, you have to read surrounding code before you modify code, and most lines of code get read many, many, many times more often than they're ever modified.
So why not make your eyes jiggle left and right and left and right as you look to see what's going on?
Make your code comfortable for vertical eye movement. You're being nice to **yourself**, and you'll understand your own code better in the future.
Loved this post. Loved, loved, loved it.
...er, "why not KEEP your eyes from jiggling"... Sorry.
Yeah! I love this formatting for ternaries, too, and also recently adopted it. I think it's starting to become more of a standard way of formatting them in the JS community. That's where I first saw it.
I've always been against nesting ternaries, as nesting makes them so confusing--but I'll admit that with this formatting nested ternaries are actually pretty readable. Don't get me wrong, I still wouldn't nest them, almost ever.
When you read ternaries, do you read them in your head with ? as "then" and : as "else"?
@WebManWalking,
I appreciate the enthusiastic thumbs-up :D I'm glad we both think about this stuff and actually have some reasoning behind the choices we make. And, not to say that reasoning doesn't change over time - I used to use Hungarian notation; I had reasoning for it then, but I no longer have a reason for it now and have stopped doing it. It's all about slowly honing the craft :D
@Adam,
Ha ha, nesting ternary operators almost always throws an exception in my mental parser :D It's one of those things I can't even read when I slow down and read it with my finger on the screen. It's like some sort of catastrophic RegEx back-tracking :P
And yes, I totally read them as "then" and "else."
In my head, the "?" and ":" actually make the sounds "hmmmm?" and "neeehhhh" ;)
@Scott: ??
@Everyone:
BONUS! ?? I recently read that, for multiline statements, having operators start a line rather than end them, is easier to read for blind programmers.
??1 => :joy:
??2 => :moneybag:
:)
Good to see that I am not alone in this. I do the exact same thing.
@Adam,
Oh, that's super interesting. I'm also king of blown away that blind programmers are a "thing". I am constantly amazed at what people can do!