What is the difference between these 2 JavaScript declarations?

Question

For one of them the "()" is inside, for the other one it is outside. Here they are:

var a = (function() {
    return {
        bla: function() {
            console.log('a');
        }
    };
} () );

var b = (function() {
    return {
        bla: function() {
            console.log('b');
        }
    };
}) ();

a.bla();
b.bla();

Answer 1

There is no difference.

The [unnecessary] parenthesis are just in different places. The function declaration is already an expression due to where it is located. The parenthesis would make a difference, while still resulting in equivalent code, if the declaration was in a statement context (and ironically they would turn it back into an expression context), which it is not.

---

The common use of parenthesis in a similar scenario is for self-invoking functions. The parenthesis are required in this case because

function x () { alert("hi!") } ()

is parsed as

function x () { alert("hi!") }; ()

when it appears as a statement -- or "top level element of a block" -- where it is parsed as a "FunctionDeclaration". Thus the following form is often used:

(function () { alert("hi!") })()

This works because function ... is no longer a statement, as above, but an expression (parsed as a "FunctionExpression"), and the expression can continue so the Automatic Semicolon Insertion does not occur as in the previous case. Also note that the function name can be omitted.

However, because in the post the function ... appears in an on the right of an = (in an "AssignmentExpression") it is therefore already in an expression context (is parsed as a "FunctionExpression") and thus no additional parenthesis are needed.

All of these are identical, but I prefer the 2nd form (for consistency within my code):

a = function () {} ()
b = (function () {}) ()
c = (function () {} ())

Happy coding.

Answer 2

There is no real difference. Both work in the same way. If you want to pass JSLint, you will need to use the first pattern, where the invocation parentheses are inside the other set of parentheses. If you don't, you will get the following error:

Move the invocation into the parens that contain the function.

Also note that the first set of parentheses are not required. It will work without them, but again will fail JSLint:

Wrap an immediate function invocation in parentheses to assist the reader in understanding that the expression is the result of a function, and not the function itself.

---

A couple of related questions:

JSLint error: "Move the invocation into the parens that contain the function"

Solution for JSLint errors

Answer 3

There is no practical difference, it's just a subtle difference in how you make the Javascript engine think of the function as a value.

Using ( function(){} () ); you are causing the function to be a value because a statement can't start with a parenthesis. Using ( function(){} ) (); you are using the parentheses to first evaluate the function as a value, then call it.

Answer 4

I think is the same difference of this:

var myObj = {bla:'blabla'}; 
var a = (myObj);
var b = myObj;

...no difference :)

Answer 5

the ending brackets mean that : When a function is to be invoked immediately, the entire invocation expression should be wrapped in parens so that it is clear that the value being produced is the result of the function and not the function itself. (taken from here)

So, if you use {}(), the function is immediately executed and the variable is assigned with the function result.

Then if you use ({})(), if there's a function between (), it is executed and the value is assigned to the variable.

They are the same thing if they contain the same functions in my opinion.