I am learning javascript and jquery and wondered whether it is good or bad practice to nest all my functions within $(document).ready(function). Is there any difference between this:

function someFunction()
{
  return someThing;
}

$(document).ready(function()
{
  // some code
  ...
  someFunction();
});

and this:

$(document).ready(function()
{
  // some code
  ...
  function someFunction()
  {
    return someThing;
  }

  someFunction();
});

Be gentle - I'm pretty new to this!

I am learning javascript and jquery and wondered whether it is good or bad practice to nest all my functions within $(document).ready(function). Is there any difference between this:

function someFunction()
{
  return someThing;
}

$(document).ready(function()
{
  // some code
  ...
  someFunction();
});

and this:

$(document).ready(function()
{
  // some code
  ...
  function someFunction()
  {
    return someThing;
  }

  someFunction();
});

Be gentle - I'm pretty new to this!

• javascript
• jquery

Share Improve this question Follow asked Mar 29, 2011 at 18:47 RobRob 78.8k5757 gold badges161161 silver badges199199 bronze badges 4

• 3 If you want to use someFunction outside document.ready then do the first. Otherwise the second. – Raynos Commented Mar 29, 2011 at 18:49
• Encapsulating all of your code inside of a self-invoking function will eliminate it from the global scope without having to cram all of your code into the ready handler. The syntax for such is: (function (){ //code }());. – user1385191 Commented Mar 29, 2011 at 19:12
• He would then not be able to call his functions form the on ready handler (unless he declared them as properties of the window object - defeating the point of the self-invoking anonymous function). – typeof Commented Mar 29, 2011 at 19:31
• I think it's bad practice to put all the stuff in one place, be it $(document).ready() or anything else. I would try a separation of concerns. If you're interested how this can be acplished with jQuery, read here. – Neovibrant Commented Aug 4, 2011 at 16:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You forgot at least one :-)

function someFunction()
{
  return someThing;
}

$(someFunction);

Generally there is no difference between: $(document).ready(argFunc) and $(argFunc). The other variations you listed have all different scopes for different things.

For example, in your 2nd block you declare someFunction inside a non-global scope, while your first and my example declare it in the global scope, which has implications for reachability.

Also, technically, with both of your variations you produce one extraneous function call. Because in this case, all you call is one function (which you can also write like my example).

UPDATE1: To add some additional info and to further the discussion about scopes - JavaScript has very loose requirements for existence of variables. If it doesn't find them in the current scope, it wall just traverse the call chain upwards and look for it - until it finds it or not. That is why you can access the jQuery object ($) from anywhere.

There is however this:

someFunction($) {
  // You can use $ here like always 
  return someThing; 
} 
$(someFunction);

This means, that the handlers (there can be more than one) for the document ready event of jQuery get passed jQuery itself as an argument.

If you specify this parameter for your function, you'll use that one, if you reference it. Otherwise, you are using the global one. That reduces the length of the upward look-up - chain. That is pletely irrelevant from a performance stand point.

But, by specifying this as a parameter, you make it absolutely clear where the jQuery object is ing from. Even that might be irrelevant.

I just wanted to show, that these callback-type functions in jQuery often take parameters that are useful. So if you are ever stuck and need access to some object you don't have, it might be worthwhile to check the jQuery docs to see, if there is not a parameter, that does what you want.

To conclude this update, I very much like the first ment to the question, which is a much better answer than mine.

UPDATE2: On the point of multiple callbacks for document ready (or any event binder in jQuery for that matter): You can do this:

$(func1); // or $(document).ready(func1);
$(func2); // or $(document).ready(func2);

Both will get called as soon as jQuery fires its document ready event. That might e in handy depending on the perspective. Some would say, it encourages spreading your logic around. Others might say, it allows for cleaner separation of all the things that need to be done on document ready.

yes. The first way puts someFunction in the global scope so that it can be called by anyone. If you intend this function to be "private" and only callable by some code then the 2nd way is preferred. Generally you should prefer the 2nd way unless you need to export the function into global scope.

The differences are subtle, but worth bringing up.

Declared functions outside of DOM ready:

If you don't call the functions until DOM ready, then this is more efficient since it is registering the functions before waiting for the DOM to load (Edit: As is noted in the ments, there will be a slight performance penalty in accessing global variables due to scope resolution). This is very minor and probably not noticeable.

More importantly, you functions bee globals, and you can clutter the global scope if you're not namespacing properly:

var myFuncs = {
    someFunction : function() { ... },
    someOtherFunciton : function() { ... }
}; 

Declared inside DOM ready:

Functions are no longer globals, but your functions are registered along with your other DOM ready code.

I would say it's fine to go either way in most cases, but definitely declare your functions under one namespace.

First off, functions are typically only declared if they are going to be used more than once. If you put a function inside the $(document).ready(function) then it won't be available outside the scope of the $(document).ready(function). Check out an article on Javascript Scope.

This is because $(document).ready accepts a function as a parameter and in your two examples you are declaring an inline function (that's the function () {} code in there). Check out a discussion of inline functions vs parameterized functions.

So, it boils down to deciding if you are going to use someFunction() more than once. If so, put it outside the $(document).ready function. Otherwise, you don't really need a function since you are just calling it once.

As long as someFunction() does not try to manipulate the dom, there is no difference. $(document).ready is called after all elements in the dom have loaded and can be accessed with javascript. If you try to manipulate an item in that page with javascript before it loads, it wont be there and the code will break.