Javascript anonymous function call [duplicate]

Question

I was reading JS sources from Twitter — on my way to improve my JS knowledge base, when I came across the strange way of calling anonymous function:

!function( $ ) {
    ...
}( window.jQuery );

... and this works! :)

It's obvious to everyone, that this:

function ( $ ) { ... } ( window.jQuery )

does not work (Syntax error), while this one is correct:

(function ( $ ) { .... })( window.jQuery )

Can anyone please explain this magic (why case with !function works)?

Answer 1

When the keyword function is met in a statement position (as the first token in a statement), the function declaration is expressed as a function statement. Function statements are hoisted to the top of the scope, cannot be immediately invoked and must have a name.

When the keyword is met in an expression position (i.e. not as the first token in a statement, in your example ! is the first token), the function declaration is expressed as a function expression, which may be anonymous and returns the value of the newly created function. Since it returns the value of the newly created function, you may immediately invoke it by adding parenthesis after it.

Wrapping the declaration inside parenthesis does the same but is more common than prefixing it with a ! or +:

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

Answer 2

The second form function () {} is a statement. The ! operator converts this into an expression. You will also find cases where people use - or + before the function keyword.

When you have an expression evaluating to a function, you can call that function by using the () operator.

Another (perhaps easier to understand) way to achieve the save same effect is with another set of parenthesis:

( function(x) { body; } )(arg);

By placing the function inside the parenthesis, you again convert it to an expression, which evaluates to a function. This function is called with arg as an argument.

As an arrow function:

( (x) => { body; } )(arg);