Do self executing functions run at dom ready?

Question

Before I heard about self executing functions I always used to do this:

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

function doSomething()
{
   // blah
}

Would a self executing function have the same effect? will it run on dom ready?

(function doSomething($) {
   // blah
})(jQuery);

Answer 1

Nope. A self executing function runs when the Javascript engine finds it.

However, if you put all of you code at the end of your document before the closing </body> tag (which is highly recommended), then you don't have to wait for DOM ready, as you're past that automatically.

---

If all you want is to scope your $ variable, and you don't want to move your code to the bottom of the page, you can use this:

jQuery(function($){
    // The "$" variable is now scoped in here
    // and will not be affected by any code
    // overriding it outside of this function
});

Answer 2

It won't, it will be ran as soon as the JavaScript file is executed.

Answer 3

No, self-executing javascript functions run right there.

If you want to create a DOM ready function, write the following:

$(function() {
  // this will run on DOM ready
});

Which is a shorthand of:

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

Answer 4

No, the self-executing function run immediatly after you "declare" it on your code. Even if it's located on an external .js file.

In your example, there is a possibility that your function will execute and the value of jQuery is undefined. If you want your code to be executed on DOMReady, continue using

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

or

$(function(){
    doSomething();
});

or even

window.onload = function(){
    doSomething();
}

Answer 5

$(document).ready(function() { ... }); simply binds that function to the ready event of the document, so, as you said, when the document loads, the event triggers.

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

is actually a construct of Javascript, and all that piece of code does is pass the jQuery object into function($) as a parameter and runs the function, so inside that function, $ always refers to the jQuery object. This can help resolve namespacing conflicts, etc.

So #1 is executed when the document is loaded, while #2 is run immediately, with the jQuery object named $ as shorthand

$(document).ready(function(){ ... }); or short $(function(){...});

This Function is called when the DOM is ready which means, you can start to query elements for instance. .ready() will use different ways on different browsers to make sure that the DOM really IS ready.

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

That is nothing else than a function that invokes itself as soon as possible when the browser is interpreting your ecma-/javascript. Therefor, its very unlikely that you can successfully act on DOM elements here.

jQuery document.ready vs self calling anonymous function