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() { ...}

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?

  • 4
    The first one clutters the global namespace. Choose the second.
    – riwalk
    Commented Jun 11, 2012 at 13:18

4 Answers 4


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.

  • +1 For mentioning debugging. I've often seen the use of "named callbacks" (don't know if this term actually exists) in Node.js code, so I too guess it's good practice. Commented Jun 11, 2012 at 14:45
  • kangax.github.com/nfe Named Function expressions -- This article tells you everything you ever wanted to know about them. Commented Jun 12, 2012 at 20:54

I'd say in this case it probably doesn't matter, but if you have anonymous callback functions, calling other anonymous callback functions, I tend to use the first approach, as it makes the code a lot more readable and easier to follow.

With regards to unit testing, the first approach would be better, as you would be able to test the initstuff function in isolation.

  • Usually we don't have a lot of code in these initialization functions. It may fetch some data from a few places and that's it
    – Martin N.
    Commented Jun 11, 2012 at 14:42

I would go for the first one, for readability/debugging/testing, etc. You can avoid the global namespace cluttering issue by simply creating a local namespace for all the functions on your page. I use object notation style, as recommended by Paul Irish (see slides 13-15 on http://paulirish.com/2009/perf/)

var MYPAGE = {
  onReady : function(){
  // init code
  someOtherCallback : function(){}


There is also I third way of registering init methods without cluttering the global namespace which i prefer:


It´s short and avoids DOM document lookup like



  • +1: I think this is standard practice, but to avoid any problems with conflicting definitions of $ I prefer: jQuery(function($) {...}); Commented Jun 11, 2012 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.