Tuesday, October 14, 2008

Non-anonymous anonymous functions

I've been browsing a lot of JavaScript code from various sources today and that made me think it would be nice to talk about a little know property of the JavaScript language that doesn't seem to be widely used:

When doing advanced JS programming, one ends up writing a lot of anonymous functions (often in the form of callbacks like this
ajaxRequest(function ( data ) { ... })

In this example the function passed to the function ajaxRequest does not have a name; hence it is anonymous. The problem with this is that once you go into debugging, stack traces start to become quite unreadable because, well, the stack frames don't have names that make them easily identifiable. Now to the little known feature: You can give a name to any JS function, simply rewrite the code above to
ajaxRequest(function ajaxResponseHandler ( data ) { ... })

and the function will get a name in stack traces. When writing object oriented code it can also be nice to encode the class or namespace name in the function name. One possibility is to abuse the beloved $ character as a name separator:
ajaxRequest(function MyClass$ajaxResponseHandler ( data ) { ... })

When coding for non-public projects one can, of course, choose whether this extra typing is worth the effort, but for library code one should always name all anonymous functions. (and yes, I'm looking at you jQuery (and yes, I know, patches welcome))

By the way: I tried whether it would be possible to actually set the name of a function at runtime (so a meta framework (like Joose :) could add names and namespace info. Unfortunately, the name property is read-only in firefox, so this is not possible. By the way2: That mozilla chose to use the non-standard name property for function names can lead to pretty weird bugs when doing JS programming, because the probability that user code wants to use the name property for its own purposes it actually quite high. __name__ would probably have been wiser.

No comments: