i am dustin diaz

JavaScript Chaining

AKA: Proof that JavaScript is an Object Oriented language. AKA: Why JavaScript is a totally kick ass language. Yeah. Anyway. It's 3am and I'm in Austin Texas writing JavaScript for work at the Hotel and I ran into particular problem that involved something that looked extremely wicked and totally awesome from which immediately afterward I couldn't believe my fingers just whiddled it onto the keyboard as if sprinkling fairy dust unto the children (I have no idea where that image just came from (nor is whiddled a word)). Ok so here was my situation. I needed all the values of each "checked" checkbox in a particular form to be concatenated into a comma-delimited string list. That's it. The purpose was to send these values to a web service where I could perform a batch query on them... and yada yada yada. Anyway, here was the code that came out of this.

JavaScript Chaining

var guids = function() {

    return Dom.query('#product-list input[type="checkbox"]').filter(

         function(el) {

             if ( el.checked == true ) {

                 return el;

             }

         }

    );

}().map(

    function(el) {

        return el.value;

    }

).toString();

console.info('my guids are:', guids);

Pretty cool, huh? Now this need not be an exercise of how to turn this into a one line function or what library can do it better, bla bla bla. But more or less an admiration of the expressive nature you can do with JavaScript. You'll notice that guid is defined only once, and through chaining, self-invocation, method inheritance, and a sweet querying utility, we've essentially assigned the correct value to guid in the end. To briefly explain what's going on, you'll see that I'm using two of the JavaScript 1.6 Array extras called filter and map which allow me to essentially weed out the non-checked checkboxes, and then map those elements with their values. For cross-browser compatibility I used my own sugar arrays. Starting from the top I've assigned guid to an anonymous function which is (immediately) self-invoked and assigned a return value. That return value is an array of elements which is returned by Dom.query (aka Ext.query). Once we have those elements, we filter through the ones that have been checked by validating against the 'checked' property. If so, we return it. Once that loop is finished, it returns the filtered array which moves right on to the map method. The mapping will take the value property from each, and return those. Once all the loops have finished, we call the Array object's toString method (which is inherited from Object's toString method).

And that my friends, is why JavaScript is sexy.