I'm no Javascript ninja..and you?

It's a sad confession to make but true nonetheless. Of course, I'm not a newbie either, I know the basics of the language, how to work with objects and functions and, of course, closures. I've even read (probably not that thoroughly) the Javascript Bible. But, for example, it was just last week that I met loop closures for the first time. A loop closure is a language construct where a function can be applied to the traversed elements:

for (i in [0, 1]) (function (i) {alert(i)}) (["a", "b"][i])

I was amazed really. For me, the former solution to that problem (a scoping issue of the loop variable but read the whole article if in doubt) was usually along these lines:

function loop(array, fn) {
   for ( i in array) fn.call(array, array[i])
}

loop(["a", "b"], function(i){ alert(i) })

Now, how much more elegant is the first snippet? It's like programming in Groovy, sometimes you are just surprised by the power offered by those one-liners. I have to admit that without the proper knowledge, the first time you face that kind of code is, well, daunting.

But, to the topic, I was reading John Resig (highly recommended) and I stumbled upon:

var obj = (function() {
   var a = 21;
   return {
      fn: function() {a;}
   };
})();

var foo;
eval('foo=a', obj.fn);

The above code was engineered to showcase a FF problem when handling evals. I wasn't designed for anything meaningful don't worry. But in the process it happens to include interesting tidbits like private variables and the call of a function just after it's been defined. The really weird part are the two last lines where it assigns the foo variable (using an eval) in the scope of the function resultant of the anonymous function invocation. Well, it required me some time to understand that. What brings me to the current situation, I'm no JS ninja you see?

JS has so many gotchas with inheritance and polymorphism that I'm not sure I will understand them all, ever. Then there are all the web issues like cross-browser, cross-domain, XSS, sandboxing et al. Even though I'm programming an OSS web framework (IWebMvc) and it's quite capable, I hope, I still have issues with topics like namespaces! Not to mention if I should offer out-of-the-box support for things like Google Caja. And that's after battling hard with other topics like cache, encapsulation, minification, gzipping, XHR, the many APIs AND the functionality itself. I don't wonder anymore why people find Javascript so fearful and find monstrosities like JSF palatable..

So, what takes to be a ninja? Well, first of all this code should not pose any problem:

Function.prototype.bind = function(){
   var fn = this,
      args = Array.prototype.slice.call(arguments),
      object = args.shift();
   return function() {
      return fn.apply(object,
         args.concat(Array.prototype.slice.call(arguments)));
   };
};

There you have an augmented native object (Function), private variables declarations, the "full" Array API and closures, of course. And, fortunately, a tutorial here. Once there, you should be aware of browser native APIs, for example, querySelectorAll or the new native JSON parsing support. You have to be in touch with the future of the web (worker threads, HTML5..). Canvas knowledge seems pretty useful as of today as well! Are you up to the task? My only advice, read the dojo or jQuery sources, there are no better tutorials out there. And then...the challenge ;-)