Try to read this code

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) : 


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.


  • Pretty sweet logo, whoever designed that must be pretty much the best person in the world. Get your 360|Flex stuff here. And if you haven't registered for 360Flex, do that here.
    Tags: flex, sweet
  • Since the next 360|Flex is fast approaching, I thought I'd post the full recording of my session at the last 360|Flex in Seattle. You can do whatever you want with this video, embed it wherever, watch it wherever, you can even download the original mp4 video file. Hopefully the embedded…
    Tags: flex

13 thoughts on “Try to read this code

  1. 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!

  2. 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) :

    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?

  3. 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) :

    Now if we could just do something about those awful variable names.

  4. Pingback: nothing happens

  5. 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!)

  6. 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
  7. 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.”

  8. 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.

  9. Pingback: Hello world! « Aaron King’s Flex Blog

  10. Pingback: Ternaries, ||, and cleaner clode... « Aaron King’s Flex Blog

  11. Nad says:

    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

  12. Nad says:

    some correction
    if (isNan(btb)){
    if (controlBar==true && !isNaN(btt)) {
    } else {
    if (isNaN(btl)) crap=bt; else crap=btl;
    } else crap=btb;
    vm.bottom = o.bottom + crap

Comments are closed.