Dollar sign before self declaring anonymous function in JavaScript?

Question

What is the difference between these two:

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

AND

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

score 55 · Accepted Answer · answered Sep 30 '11 at 18:33

55

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

answered Sep 30 '11 at 18:33

g.d.d.c

46,865
9
101
111

1

Ah ok, so the major difference is that the second one doesn't wait for the document to finish loading, and just executes immediately? – xil3 Sep 30 '11 at 18:37
4

@xil3 - 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. – g.d.d.c Sep 30 '11 at 18:44

score 26 · Answer 2 · edited Sep 30 '11 at 19:27

26

$(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.

edited Sep 30 '11 at 19:27

bittersweetryan

3,383
5
28
42

answered Sep 30 '11 at 18:33

voigtan

8,953
2
29
30

1

*self executing anonymous function – aziz punjani Sep 30 '11 at 18:40
8

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: http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife – nwellcome Sep 30 '11 at 18:51

nathan gonzalez · Answer 3 · 2011-09-30T18:52:00.567

5

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

edited Sep 30 '11 at 18:52

answered Sep 30 '11 at 18:33

nathan gonzalez

11,817
4
41
57

1

That is not actually a closure. Just a self-invoking anonymous function. Neither of them are closures. See: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work – gilly3 Sep 30 '11 at 18:35

score 5 · Answer 4 · answered Sep 30 '11 at 18:47

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.

score 2 · Answer 5 · answered Nov 16 '16 at 08:15

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

Dollar sign before self declaring anonymous function in JavaScript?

5 Answers5

Linked

Related