Dollar sign before self declaring anonymous function in JavaScript?

Question

What is the difference between these two:

$(function () {
    // do stuff
});

AND

(function () {
    // do stuff
})();

Dygert

Answer 1

The first uses jQuery to bind a function to the document.ready event. The second declares and immediately executes a function.

Diastema

Ah ok, so the major difference is that the second one doesn't wait for the document to finish loading, and just executes immediately? – Dygert

@Dygert - correct. The first one is appropriate if the function needs to modify the DOM. The second is useful if you just need the effects of the JS. Rarely the two are interchangeable, but typically the former is preferable because most jQuery code is used to manipulate DOM elements. – Diastema

Answer 2

$(function() {}); is a jQuery shortcut for

 $(document).ready(function() { 
     /* Handler for .ready() called. */ 
 });

While (function() {})(); is a instantly invoked function expression, or IIFE. This means that its an expression (not a statement) and it is invoked instantly after it is created.

Restricted

*self executing anonymous function – Shyamal

I'd prefer to see them called "immediately invoked" rather than "self executing" or "self-invoking". For example, (function () { arguments.callee() })() would be a "self executing/invoking anonymous function" while (function(){})() is just an anonymous function that is invoked immediately. See: benalman.com/news/2010/11/… – Yellowweed

Answer 3

one is a jquery $(document).ready function and the other is just an anonymous function that calls itself.

Gurl

That is not actually a closure. Just a self-invoking anonymous function. Neither of them are closures. See: #111602 – Delusive

Answer 4

They are both anonymous functions, but (function(){})() is called immediately, and $(function(){}) is called when the document is ready.

jQuery works something like this.

window.jQuery = window.$ = function(arg) {
    if (typeof arg == 'function') {
        // call arg() when document is ready
    } else {
       // do other magics
    }
}

So you're just calling the jQuery function and passing in a function, which will be called on document ready.

The 'Self-executing anonymous function' is the same as doing this.

function a(){
    // do stuff
}
a();

The only difference is that you are not polluting the global namespace.

Vanguard

Answer 5

$(function () {
    // It will invoked after document is ready
});

This function execution once documents get ready mean, the whole HTML should get loaded before its execution but in the second case, the function invoked instantly after it is created.

(function () {
    // It will invoked instantly after it is created
})();

Dictatorial