Self-executing function syntax and callback syntax explained

Question

bit of a silly question perhaps.

But I want to understand why the syntax on the self-executing function and the callback it has is so different to all the other JS syntax..

(function () {
})()

I just need to understand why its valid to encapsulate it with () I wouldn't have guessed that to be valid, and then the extra () afterwards for the callback, (which just sits directly after it, I also wouldn't have expected that to be valid.

Is anyone able to explain this to me?

Answer 1

The function (...) {...} part is a function expression, that is, an expression that represents a function. The only reason it has to be wrapped in parentheses in this case is that if the keyword function is the very first thing in a statement, then the statement is assumed to be a function statement, that is, a function declaration. (Actually, it doesn't necessarily have to be wrapped in parentheses; it also works to prefix it with a +, or in general to put any sort of token before function that prevents the function-statement interpretation.)

The () part after the function expression is the same as the normal () for calling a function. This:

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

is (aside from the temporary variable) the same as this:

var f = function (...) {...};
f();

which is equivalent to this:

function f(...) {...};
f();

Answer 2

Essentially the outer parentheses allow the function object to be fully interpreted and instantiated, so that once you exit the scope of those parentheses the function object is ready to be called.

Answer 3

See here:

• Why do you need to invoke an anonymous function on the same line?

When declaring as you did, you are using it as a function expression (3rd way of defining the function from the above link). As with any expression, this (expression) evaluates to expression - parentheses are used here is establish precedence where necessary. So you can write this for example:

var f = function(a) {
    var s = (((( 1 )))) + (((( a ))));
    console.log(s);
};

((((( f ))))) (2);

(live example) and then remove all the unnecessary parentheses with the same result (which is printing of 1 + 2 = 3, essentially). The result of:

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

is a function that accepts some arguments and has a body to be executed. This:

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

is pretty much equivalent to:

var f = (function(...) { ... });
// Now f is a function that can be called
f();

Anonymous functions are useful, among other things, for two reasons - they are anonymous (i.e. they don't create additional names - see again the above SOq link) and they are "containers" for other stuff that doesn't need to be global.