javascript syntax explanation

Question

Possible Duplicate:
What does this mean? (function (x,y)){…}){a,b); in JavaScript

Please anyone explain and give example about the Javascript below, I can't find any document that explain about this:

(function([arg, arg ...]) {

    //javascript code here

})([str, str ...]);

I'm asking this question because I see in the Google also Facebook javascript code, most of the them using this syntax.

Search for javascript closures. http://blog.morrisjohns.com/javascript_closures_for_dummies — jantimon, Oct 14 '11 at 08:06
I doubt that searching on closures will help much. That pattern is called an [immediately invoked function expression](http://www.google.com.au/search?client=safari&rls=en&q=immediately+invoked+function+expression&ie=UTF-8&oe=UTF-8&redir_esc=&ei=ZO-XTpzvO9CXiQe60aWsAg) by some. Others have similar names. It can be used to create closures, but it isn't necessary to create a closure nor is it the only way. — RobG, Oct 14 '11 at 08:13

score 4 · Answer 1 · answered Oct 14 '11 at 08:12

4

It is anonymous function invocation

the arguments values str, str are passed to the function as arguments arg, arg and then the javascript code is executed.

it is the same as

function foo([arg, arg ...]) {
    //javascript code here
}

foo([str, str, ...]);

answered Oct 14 '11 at 08:12

jcubic

61,973
54
229
402

+1 for getting it mostly right. :-) – RobG Oct 14 '11 at 08:23

ipr101 · Accepted Answer · 2011-10-14T08:24:50.000

3

What's happening is, an anonymous function expression is defined (in parentheses) -

(function([arg, arg ...]) {

    //javascript code here

})

The function is then immediately called using the () at the end of the function, just as as you'd call a normal function var result = someFunction(). So , for example -

(function() {
    alert('Called by "()" at end of function');
})()

You can also pass arguments to the anoymous function, via the parentheses -

(function(username) {
    alert('Called by "()" at end of function. Hello ' + username + '!');
})('Dave')

edited Oct 14 '11 at 08:24

answered Oct 14 '11 at 08:13

ipr101

24,096
8
59
61

+1 - speed is the enemy of accuracy. :-) – RobG Oct 14 '11 at 08:26
@RobG - Thanks! Not sure I can blame it all on speed though :) – ipr101 Oct 14 '11 at 08:52

tomtom · Answer 3 · 2011-10-14T08:29:50.297

1

The function in round brackets is called just once with args defined by strs.

The round brackets containing the function are used to limit the scope of the function, i.e. the function cannot be called externally.

The str variables can be global variables (e.g. jQuery) and can be aliased by their corresponding arg (e.g. jQuery -> $) for the sole use of the function.

Generally, this is a good, safe way to write javascript, e.g.

(function($) {
   // code
})(jQuery)

For the function, the local variable '$' means the global variable 'jQuery'. The means you can have '$' defined to be something else in another script (or function) and that variable will not affect '$' in this function.

edited Oct 14 '11 at 08:29

answered Oct 14 '11 at 08:13

tomtom

71
3

The round brackets containing the function are **not** scope operators. They are there to allow the function to be invoked immediately. If they weren't there, a syntax error would occur. – Matt Oct 14 '11 at 08:19
Ah, good point - thanks. Although, my point that the function cannot be called externally (since it's anonymous) is still true. – tomtom Oct 14 '11 at 08:21

phihag · Answer 4 · 2011-10-14T08:23:06.360

1

(function(a, b) {
  var x;
})

returns an anonymous function. For technical/historical reasons, anonymous functions must be wrapped in parentheses.

Notably, the names a,b and x are not visible to outside code. In contrast, just writing var x; would make x accessible and thereby pollute the global namespace. This is the equivalent of private variables in classical object-orientated languages.

We could also write:

var func = function(a, b) {var x;};
// or equivalently:
function foo(a, b) {var x;};

func('arg1', 2);

but that would again pollute the global namespace by making a function func visible for everyone else. Since we don't want to call func more than once anyway,

(function(a, b) {var x;}) ('arg1', 2);

is the perfect way to execute code with variables without making these variables(or any variable names) visible to the rest of the world.

edited Oct 14 '11 at 08:23

answered Oct 14 '11 at 08:14

phihag

278,196
72
453
469

The expression at the top of your post is a function declaration with no name, so it is a syntax error. Given a name to make it syntactically legal, it has no return statement so returns `undefined`, not a function. – RobG Oct 14 '11 at 08:21
@RobG Thanks. Fixed: Enclosed with parentheses to make it syntactically legal, it indeed returns a function. Note that anonymous functions do not need to be wrapped in parentheses in expressions, only in statements. – phihag Oct 14 '11 at 08:23

javascript syntax explanation

4 Answers4