Debugging anonymous functions in Javascript.

Javascript allows you to create function without name. That's why we name them (oxymoron), anonymous functions. Almost used everywhere, this kind of function can become a real nightmare to debug. We will see what is the problem and how to solve it.

Anonymous functions

Let's first see what is an anonymous function by looking at some code:

var myObject = {
    doSomething:function () {
       console.loh("my message");
   }
};

document.body.onclick=function(){
    myObject.doSomething();
}

The code in it self does not do much...
But you can see that we define functions that do not have a name.
They are assigned to a property.

Notice that:

var myFunc = function() {

}
function myFunc() {

}

is different in the timing you will be able to call these functions.
For example:

myFunc();
var myFunc = function() {

}

will fail but not:

myFunc();
function myFunc() {

}

Functions are parsed first and are available, whatever the order you write your code in. (Not true in the console of Firebug though.)
By the way, did you see the typo? console.loh() instead of console.log().

If you run this script, you will get a nice error that you can look in Firebug, Firefox:

onclick()
(?)()

Not helping...
If you have hundreds of line of javascript code, I can tell you that it may take some time to get to the error...

So how can we handle this?

Name your anonymous functions

ok,so what's the deal? name your anonymous functions, oxymoron, here, oxymoron there...

It's easy, give a name to your anonymous functions:

var myObject = {
    doSomething:function $_doSomething() {
       console.loh();
   }
};

document.body.onclick=function $_bodyClick(){
    myObject.doSomething();
}

Prefixing all the anonymous functions with $_ is just a convention
that is going to help in a few seconds.
Traced in Firebug, you get:

$_doSomething()
$_bodyClick()

A little bit nicer than the cryptic first output!

But naming anonymous functions for the sole purpose of debugging is going to add unnecessary bytes right??
Indeed, we should name them for debugging and erase their name for the live version.
But this is too much of hassle and nobody will do it unless...

Javascript Preprocessor at the rescue.

There are many preprocessors out there that allows you to simplify the build process of your javascript files.
One of them,jsmake (which I've also written-sorry), allows you to automatically name all your anonymous functions or do the opposite, remove their names.

In order to remove all the anonymous function names, you will need to prefix them with $_. If you let the preprocessor name them instead of doing it by hand, it will prefix them with $_ so that you can remove them again very easily via the same preprocessor!


A simple example will be:

var testing = function () {
    return true;
}
var myObject = {
    doSomething:function () {
       console.log();
   }
};
document.body.onclick=function(){
    myObject.doSomething();
}
document.body.addEventListener('click',function(e){
    var object= {};
    object.testing = function() {
        return true;
    }
});

Once preprocessed, you get:

var testing = function $_testing1 () {
    return true;
}
var myObject = {
    doSomething : function $_doSomething1 () {
       console.log();
   }
};
document.body.onclick = function $_onclick1 (){
    myObject.doSomething();
}
document.body.addEventListener('click',function $_anon1(e){
    var object= {};
    object.testing = function $_testing2 () {
        return true;
    }
});

You can read more about this here.
Don't hesitate to introduce other preprocessors that do the same thing or offer even more functionality!