Javascript anonymous function call

javascript anonymous-function
Konstantin Likhter picture Konstantin Likhter · Feb 1, 2012 · Viewed 58.2k times · Source

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

Felix Loether picture Felix Loether · Feb 1, 2012

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 () {
    ...
})();

Related questions

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

I was reading some posts about closures and saw this everywhere, but there is no clear explanation how it works - everytime I was just told to use it...: // Create a new anonymous function, to use as a wrapper (function(){ // …

Read More
How can I pass a reference to a function, with parameters?

Possible Duplicate: How can I pre-set arguments in JavaScript function call? (Partial Function Application) I need to able to pass a reference to a function with a given set of parameters. Here is an example of passing a reference without …

Read More
removeEventListener on anonymous functions in JavaScript

I have an object that has methods in it. These methods are put into the object inside an anonymous function. It looks like this: var t = {}; window.document.addEventListener("keydown", function(e) { t.scroll = function(x, y) { window.scrollBy(x, …

Read More