How does JavaScript's grouping operator work?

Question

How does JavaScript's grouping operator work?

1 + 2;
(1 + 2);

function(){ return 1} + "text";  // SyntaxError
(function(){return 1} + "text");

Given the above code, I have the following questions:

1. Why does 1 + 2; work without syntax error, whereas function(){ return 1} + "text" raises a SyntaxError?
2. How does the grouping operator in (function(){return 1} + "text") fix the syntax error?

Answer 1

When function is at the beginning of a statement, it's treated as the beginning of a named function definition, which should be like:

function someName() { return 1; }

This is a statement, not an expression, so it can't be used as part of a larger expression.

In fact, it's not valid to have that statement without a name. You get a syntax error from:

function() { return 1}

all by itself.

But when you put it after a parenthesis, it's not the beginning of a statement any more, so it's a function expression, which returns the function as a value. Then it can be used as a sub-expression in a larger expression.

It's not the grouping operator that does it, just the fact that it's not at the beginning of the statement. For instance, you can also write:

var foo = function() { return 1 } + "text";

Answer 2

The 1+2; is something that works in most languages with a C-inspired syntax. One of the kinds of allowed statements in Javascript is a statement that just contains an expression. This is to allow statements that just contain a function call, such as foo(); or assignment statements like x=5;. Yes, assignments in Javascript are considered expressions instead of statements, which is why you are allowed to shoot yourself in the foot and put an assignment inside an if-statement conditional (the classic = vs == bug). In the end, it would be hard for the compiler to forbid useless expression-statements such as 1+2; while still allowing foo() and x = 5;.

The function(){} vs (function(){}) thing is a Javascript quirk. Javascript has different rules in the grammar for "function declaration statements" and "function expressions". In the first example the function is parsed as a statement, which cannot be added to other things. In the second, the parenthesis makes the function be parsed as an expression, which allows it to be added to other things.

This is why the "self invoking function pattern" always adds a pair of parenthesis arounf the anonymous function.

(function(){
     ...
 }())