57

Both of these code blocks below alert foo then bar. The only difference is })() and }()).

Code 1:

(function()
{
    bar = 'bar';
    alert('foo');
})();

alert(bar);

Code 2:

(function()
{
    bar = 'bar';
    alert('foo');
}());

alert(bar);

So is there any difference, apart from the syntax?

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
Amy B
  • 17,874
  • 12
  • 64
  • 83
  • 1
    See also [Location of parenthesis for auto-executing anonymous JavaScript functions?](http://stackoverflow.com/questions/3384504/location-of-parenthesis-for-auto-executing-anonymous-javascript-functions) or [Is there a difference between (function() {…}()); and (function() {…})();?](http://stackoverflow.com/questions/3783007/is-there-a-difference-between-function-and-function) – Bergi Oct 23 '13 at 20:29
  • 1
    just when u think everything in JS is not what u expect - it is. tricked again! js first language to use reverse pschology!!! – Dude Bro Nov 07 '13 at 15:53

3 Answers3

60

No; they are identical

However, if you add new beforehand and .something afterwards, they will be different.

Code 1

new (function() {
    this.prop = 4;
}) ().prop;

This code creates a new instance of this function's class, then gets the prop property of the new instance.
It returns 4.

It's equivalent to

function MyClass() {
    this.prop = 4;
}
new MyClass().prop;

Code 2

new ( function() {
    return { Class: function() { } }; 
}() ).Class;

This code calls new on the Class property.
Since the parentheses for the function call are inside the outer set of parentheses, they aren't picked up by the new expression, and instead call the function normally, returning its return value.
The new expression parses up to the .Class and instantiates that. (the parentheses after new are optional)

It's equivalent to

var namespace = { Class: function() { } };

function getNamespace() { return namespace; }

new ( getNamespace() ).Class;
//Or,
new namespace.Class;

Without the parentheses around the call to getNamespace(), this would be parsed as (new getNamespace()).Class — it would call instantiate the getNamespace class and return the Class property of the new instance.

Community
  • 1
  • 1
SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • 1
    The `new...prop` examples are helpful. Thanks. – Amy B May 09 '11 at 15:18
  • 1
    There's also a difference whenever it's directly preceded by an identifier, which might happen by accident if you don't use semicolons in your JavaScript. `a(function () { return 5; }())` reduces to `a(5)` whereas `a(function () { return 5; })()` reduces to `a()()` which further reduces to `5()`, which is illegal. – Keen Aug 15 '13 at 18:35
  • Effectively the parenthesis act as a temporary anonymous variable on "Code 2". You could also write `var f = function(){ ... }();` It would output the same result. – hitautodestruct May 13 '14 at 07:39
7

There's no difference - the opening brace only serves as a syntactic hint to tell the parser that what follows is a function expression instead of a function declaration.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
6

There's no difference. Both are function expressions.

There is be a third way, too:

+function() {
    bar = 'bar';
    alert('foo');
}();

(instead of the + another operator would work, too)

The most common way is

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

though.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • 2
    http://jsperf.com/self-invoking-function – Andrew Dec 17 '12 at 05:51
  • 1
    The name "self-invoking function" is misleading, since the function doesn't invoke itself in its body recursively, but it is *being* invoked immediately after definition. I'd rather call it "immediately invoked function". – SasQ May 19 '14 at 19:30