72

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)?

Konstantin Likhter
  • 910
  • 1
  • 6
  • 8
  • 1
    See http://benalman.com/news/2010/11/immediately-invoked-function-expression/ for other valid IIFE patterns. – Ates Goral Feb 01 '12 at 05:52

4 Answers4

98

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 () {
    ...
})();
manuell
  • 7,528
  • 5
  • 31
  • 58
Felix Loether
  • 6,010
  • 2
  • 32
  • 23
  • 3
    Probably they used ! instead of wrapping it in () because it uses 50% fewer characters. :) Less going over the wire = faster load times. – jinglesthula Feb 13 '14 at 21:19
12

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);
Benargee
  • 162
  • 1
  • 2
  • 8
nimrodm
  • 23,081
  • 7
  • 58
  • 59
0

As far as the exclamation mark goes, that is not magic. It converts the result to a true/false.

Your problem may be that your anonymous function has an error inside it.

Shane
  • 2,007
  • 18
  • 33
  • 4
    Just try to evaluate `function (a) { alert(a); } (5); ` -- you will get error. Then replace `function` with `!function` and try again. Also notice, that `(function(a) { ... })(5)` and `(function(a) { ... }(5))` successfully work. – Konstantin Likhter Feb 01 '12 at 05:50
-1

this sounds like a javascript syntax bug:

a named function could be a statement however, an anonymous function just consider it as an expression.

Pro: you can do function() { ... }()

Con: you cannot do function() { ... }

But why people would want to define a anonymous function without invoking it? So the con is not really a concern.

Luca
  • 9,259
  • 5
  • 46
  • 59
Stone Zhong
  • 9