Anonymous function vs. separate named function for initialization in jquery

coding-stylejquery

Let's say we have some code that is used to initialize things when a page is loaded and it looks like this:

function initStuff() { ...}
...
$(document).ready(initStuff);

The initStuff function is only called from the third line of the snippet. Never again. So usually people put this into an anonymous callback like this:

$(document).ready(function() { 
    //Body of initStuff
});

Having the function in a dedicated location in the code is not really helping with readability, because with the call on ready() makes it obvious that this is initialization code.

Are there any other reasons to prefer one over the other?

Best Answer

As @Stargazer712 mentioned, the first clutters the global namespace, so the second one is the winner IMHO. Now, having said that, because you're using an anonymous function in the second example, your debugger's callstack will be useless and will get differing results depending on the debugger you use. Ususally, what I end up going with is:

$(document).ready(function MODULE_init() { 
    //Body of initStuff
});

That way, the global namespace doesn't get cluttered and you have a useful callstack.

I tend to use the above convention in all anonymous (well, not anonymous anymore ;)) function definitions. It's a convention that I found when browsing through Firefox JS code.

Edit: Now having said all that, Oliver brings up a good point with unit tests. The above is meant to act as a wrapper for more complex operations, not to house a ton of untested code.

Related Solutions

Coding Style – Functions That Only Call Other Functions

This is commonly referred to as functional decomposition and is generally a good thing to do, if done correctly.

Also, the implementation of a function should be within a single level of abstraction. If you take largeReportProcessingFunction, then its role is to define which different processing steps are to be taken in which order. The implementation of each of those steps is on an abstraction layer below and largeReportProcessingFunction shouldn't depend on it directly.

Please note that this however is a bad choice of naming:

void largeReportProcessingFunction() {
    callAllSection1Functions();
    callAllSection2Functions();
    callAllSection3Functions();
    ...        
}

You see callAllSection1Functions is a name that doesn't actually provide an abstraction, because it doesn't actually say what it does, but rather how it does it. It should be called processSection1 instead or whatever is actually meaningful in the context.

JavaScript Coding Style – How to Keep Code with Continuations/Callbacks Readable

It's highly unlikely that you can achieve with plain js the same level of conciseness and expressiveness in working with callbacks that C# 5 has. The compiler does the work in writing all that boilerplate for you, and until the js runtimes will do that, you will still have to pass an occasional callback here and there.

However, you may not always want to bring callbacks down to the level of simplicity of linear code - throwing functions around doesn't have to be ugly, there's an entire world working with this kind of code, and they keep sane without async and await.

For instance, use higher-order functions (my js may be a bit rusty):

// generic - this is a library function
function iterateAsync(iterator, action, onSuccess, onFailure) {
var item = iterator();
if(item == null) { // exit condition
    onSuccess();
    return;
}
action(item,
    function (success) {
        if(success)
            iterateAsync(iterator, action, onSuccess, onFailure);
        else
            onFailure();
    });
}


// calling code
var currentImage = 0;
var imageCount = 42;

// you know your library function expects an iterator with no params, 
// and an async action with the current item and its continuation as params
iterateAsync(
// this is your iterator
function () {   
    if(currentImage >= imageCount)
        return null;
    return "http://my/server/GetImage?" + (currentImage++);
},

// this is your action - coincidentally, no adaptor for the correct signature is necessary
LoadImageAsync,

// these are your outs
function () { console.log("All OK."); },
function () { console.log("FAILED!"); }
);

Best Answer

Related Solutions

Coding Style – Functions That Only Call Other Functions

JavaScript Coding Style – How to Keep Code with Continuations/Callbacks Readable

Related Topic