9

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?

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

4 Answers 4

Reset to default
10

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.

Improve this answer
2
  • +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.
    – Oliver Weiler
    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.
    – Sean McMillan
    Jun 12, 2012 at 20:54
7

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.

Improve this answer
1
  • 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.
    Jun 11, 2012 at 14:42
3

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

jQuery(document).ready(MYPAGE.onReady);
Improve this answer
2

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

jQuery(function(){....});

It´s short and avoids DOM document lookup like 

jQuery(document).ready(function(){...});

does.

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

Your Answer

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

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