Try to read this code

21 03 2007

Try to read this code

Posted by: Doug, in Flex

I often use the ?: format for conditional tests (Wikipedia tells me this is called a ternary conditional expression), it makes code short and sweet and often easily readable. But I was digging through some of the Flex framework source (mx.containers.Panel line 801) and came across this line:

vm.bottom = o.bottom + (isNaN(btb) ?
  (controlBar && !isNaN(btt) ? btt : isNaN(btl) ? bt : btl) :
  btb);

Honestly?

I’ve used conditional expressions a lot, and even nested conditional expressions occasionally, but adding that third level of nesting makes a line of code that I can hardly read. My head almost exploded.

This entry was posted on Wednesday, March 21st, 2007 at 3:37 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 Responses to “Try to read this code”

Josh Tynjala says:
March 21st, 2007 at 4:03 pm
I find that the ternary operator is just plain difficult to read. Every time I see it, I have to shift my mind into a new mental state to try to remember how it works. You almost just killed me with that gem of a code snippet!
Renaun Erickson says:
March 21st, 2007 at 5:20 pm
Forget trying to understand the code just go make your self a BLT and sit on the coach with a nice cold drink.
judah says:
March 22nd, 2007 at 4:33 am
nice. i like terminator conditioner shampoo or whatever its called. except not 3 levels deep. let’s see how nerdy i can get. if we translate this (know of any customizable translator software?) then that code would mean this:

vm.bottom = o.bottom + (isNaN(btb) ?
(controlBar && !isNaN(btt) ? btt : isNaN(btl) ? bt : btl) :
btb);

Set the property “bottom” of object “vm” equal to the value of “o.bottom” and “btb” if it is a number. if it is not a number then set it to “o.bottom” and “btt” if controlBar is true and “btt” is not not a number. if controlBar is not true or “btt” is not not not a number then if “btl” is not a number then set “vm.bottom” to “bt” if “btl” is not a number or “btl” if “btl” is a number. if btl is a sandwich take a number and get in line. if you order a btl with fries then get a combo meal if it will save you money. if it will not save you money then dont get a combo meal. …what am i doing up this early again?
chuck says:
March 22nd, 2007 at 4:53 am
I like the ternary operator, but I’ve over-used it on occasion. I think the thing I liked about it was that I had really liked the Scheme/Lisp I was exposed to in school, and in Lisp the “if” statement is actually pretty much just like the ternary operator. So I got kind of used to it.

I think the readability can be helped with some indenting… let’s see if I can get Wordpress to do this:
```
vm.bottom = o.bottom +
   (isNaN(btb) ?
      (controlBar && !isNaN(btt) ?
         btt :
         isNaN(btl) ? bt : btl) :
      btb);
```
Now if we could just do something about those awful variable names.
nothing happens says:
March 22nd, 2007 at 6:13 am
[...] [due to] computing, Flash/ActionScript programming [...]
gabriel montagné says:
March 22nd, 2007 at 6:29 am
Well, ternaries can actually clear up the production of some values, making it clear the conditions for each particular value, as well as a default value at the end. If properly indented, the can be way clearer than a long set of ifs and elses.
```
var something  = conditionA  ? valueA
               : conditionB  ? valueB
               : conditionC  ? valueC
               : conditionD  ? valueD
               : default
               ;
```
It is likely that the layout won’t come out OK(tm) in this comment, but a clear way of indenting this is to line the : with the = assignment operator, and all the ? in the same column.. that way the default value will stand out at the end (and leaving it out will cause a syntax error!)

gabriel montagné says:
March 22nd, 2007 at 6:50 am

with a minimal cleanup, the initial code could actually be very clear to read:


vm.bottom = o.bottom + (     

            !isNaN(btb)                 ? btb
        :   controlBar && !isNaN(btt)   ? btt
        :   isNaN(btl)                  ? bt
        :   btl
        ;
);

chuck says:
March 22nd, 2007 at 8:12 am
Since Wordpress has a problem with formatting code in comments, I posted my revised indentation of the offending line at my site — it’s the trackback above from “nothing happens.”
Doug says:
March 22nd, 2007 at 8:21 am
Sorry to everyone who was trying to post formatted code in the comments and got the indenting all messed up. The secret was using the <pre > AND the <code > tags nested together.

I went ahead and edited people’s comments to try to get the formatting how I think it was supposed to be. Hopefully I didn’t mis-format anyone’s code.
Hello world! « Aaron King’s Flex Blog says:
March 22nd, 2007 at 1:42 pm
[...] Hello world! Hello World! Okay, Okay, Okay. So I was reading a post on Doug McCune’s blog this morning, and I started a reply. Well, the reply started getting so long and drawn out that I finally said to myself, “Ya know, this really should be a blog post all to itself.” And thus tipped the scales… I finally did what I’ve been thinking about for ages and started a blog. [...]
Ternaries, ||, and cleaner clode... « Aaron King’s Flex Blog says:
March 22nd, 2007 at 3:06 pm
[...] March 22nd, 2007 In my first post, I mentioned a post over on Doug McCune’s Blog that finally tipped me over the edge to start blogging. So, here’s it is… [...]
Nad says:
March 25th, 2007 at 2:44 am
if (isNan(btb)){
if (controlBar==true && !isNaN(btt)) crap=btt; else {
if (isNaN(btl)) crap=bt; else crap=btl;
}
} else crap=btb;
} else crap=btb;
vm.bottom = o.bottom + crap
Nad says:
March 25th, 2007 at 2:49 am
some correction
if (isNan(btb)){
if (controlBar==true && !isNaN(btt)) {
crap=btt;
} else {
if (isNaN(btl)) crap=bt; else crap=btl;
}
} else crap=btb;
vm.bottom = o.bottom + crap

Try to read this code

13 Responses to “Try to read this code”

Leave a Reply