javascript - Why is this grouping operator + function immediately invoked

Question

I'am studying the behaviour of Immediatly Invoked Function Expressions (IIFE) and while doing that I encounterd the following situation.

(function () {
    document.write("bar");
})

(function () {
    document.write("foo");
}());

I thought that the first is just a grouping operator with a function expression inside without calling it. The second is a grouping operator as well with a function expression but now with the call of that function.

What I find strange is that both are invoked, why is that?

(function () {
    document.write("bar");
})

var x = 1;

(function () {
    document.write("foo");
}());

When I break the two by inserting a variable declaration in between, it's just writes foo. This is what I expected.

Answer 1

Because you forgot the semicolon after the first function expression:

(function () {
    document.write("bar");
});

Otherwise the second "grouping operator" is interpreted as a function call. So this:

(function a() {
    ...
})

(function b() {
    ...
}());

is basically the same as:

function b() {
    ...
}

(function a() {
    ...
})(b());

Reordering makes it a bit easier to see. Remember that white space characters have no meaning in JavaScript and are ignored.