Question

Good evening,

I have been trying to wrap my head about this, below, code written by Chris Coyer.

I understand this is a self-invoked function named ‘supports’, but what I don’t understand is how ‘supports’ is passed an argument (as seen below in the // Test section). Please could someone explain this or point me in the right direction for further reading?

// Generic Testing Function
var supports = (function() {
   var div     = document.createElement('div'),
       vendors = 'Khtml Ms O Moz Webkit'.split(' '),
       len     = vendors.length;  

    return function(prop) {
      if ( prop in div.style ) return true;  

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });  

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };
})();  

// Test
if ( supports('flowInto') ) {
   $("html").addClass('cssregions');
} else {
   $("html").addClass('no-cssregions');
}

Answer 1

Let’s see what supports is:

var supports = (function() {
    /* ... */
})();

OK, so supports is the return value of an anonymous function that gets invoked on the spot. What does this anonymous function return?

    return function(prop) {
      if ( prop in div.style ) return true;  

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });  

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };

Alright, so the return value of this function (which is what support holds as we said above) is actually a function that takes one argument (prop).

So at this point it should become clear that it’s perfectly logical to do what the test section does, i.e. call that function:

if ( supports('flowInto') ) /* .... */

It’s really not complicated when you know where to start from.