Difference between these 2 javascript closure syntaxes?

Question

Possible Duplicate:
Is there a difference between (function() {…}()); and (function() {…})();?

I've seen the following syntax used to prevent variables from getting into global scope:

(function ($, undefined)
{

})(jQuery);

More recently I've seen code doing it this way:

(function ($, undefined)
{

} (jQuery));

I find the 1st way makes the most sense to me. I mentally read it as:

I've defined a function and I wish to wrap it into an expression, (the first set of parenthesis). That expression is a function object which I then wish to call using method syntax and the parameter I'm passing to this function object is jQuery.

The 2nd syntax is less clear to me, because it looks like the outer parenthesis are unnecessary.

My javascript knowledge isn't quite good enough yet to feel comfortable w/ the 2nd syntax. Do these produce identical behavior? Is there any difference at all?

What would happen if you did this?

function ($, undefined)
{

} (jQuery);

hugomg · Accepted Answer · 2011-10-09T00:44:33.247

3

If a function keyword occurs at the start of a line it is parsed as a function ~~statement~~ declaration. Funcsion statements require a function name so the 3rd option you present is not allowed (you can test that yourself).

If the function keyword appears elsewhere it is parsed as a function expression and is allowed to be anonymous. There are many ways to do this but the convention for the module pattern you shown is wraping the construct in parenthesis. (Some byte-savers like using a unary operator like + or ~ instead)

If you choose to use the parenthesis puting the last one inside (1st version) or outside (2nd version) is a matter of personal preference. I prefer the 2nd one since the parenthesis wraps the whole pattern instead of just the function.

edited Oct 09 '11 at 00:44

answered Oct 09 '11 at 00:36

hugomg

68,213
24
160
246

Ahh, OK I did not know that. That makes perfect sense now, and with that understanding I think I may like the 2nd syntax better now too. Thank you. – C.J. Oct 09 '11 at 00:40
1

It's *function declaration* rather than *function statement*. – Tim Down Oct 09 '11 at 00:41
Great! Now I can also start convincing you to put the opening brace on the same line :P – hugomg Oct 09 '11 at 00:43
That's a hard habit for me to break :) – C.J. Oct 09 '11 at 00:47

score 3 · Answer 2 · answered Oct 09 '11 at 00:38

The reason you're seeing it done the second way is simply a matter of convention. A lot of people run their code through jslint.com (or node-jslint). By default, the lint tool will complain about the first version of the immediate function.

To see this in action, paste the following code into the textarea at jslint.com and run the tool:

/*jslint devel: true, browser: false, sloppy: false, maxerr: 50, indent: 4 */
(function (a) {
    'use strict';
    alert(a); // Yay!
}("Yay!"));

(function (b) {
    'use strict';
    alert(b); // Yay!
})("Yay!");

score 2 · Answer 3 · answered Oct 09 '11 at 00:24

2

Yes these are functionally the same. Use whichever one seems more intuitive to you.

answered Oct 09 '11 at 00:24

Keith.Abramo

6,952
2
32
46

What would happen if you did this? `function ($, undefined) { } (jQuery);` – C.J. Oct 09 '11 at 00:28
Since it is not contained in an anonymous function I believe it would be scoped as a global function. – Keith.Abramo Oct 09 '11 at 00:32
@CJ Without the `( )` wapping, that's a syntax error. – Yahel Oct 09 '11 at 00:34
I agree its global. It has no name so I'd say it is anonymous. I wonder...does wrapping it in parenthesis cause the dunction to leave memory after it executes vs staying around even though it could not be called. – C.J. Oct 09 '11 at 00:34
@yahelc. You're right it is an error. – C.J. Oct 09 '11 at 00:37

Difference between these 2 javascript closure syntaxes?

3 Answers3