JS: What's the difference between a ! closure

Question

Possible Duplicate:
What does the exclamation mark do before the function?

So I was going back and looking over some of my own code as well as some other javascript code and I realized that a while back when I started writing javascript libraries I was using closures that looked something like this:

(function( window, document, undefined ) {
    // code
})( window, document );

But then I saw some bootstrap code and I changed to this syntax:

! function (window, document, undefined) {
    // code
}(window, document);

Now, if I'm not wrong (and please correct me if I am), placing the '!' in front of my anonymous function just causes it to be treated as '()' then returns (into nowhere?) a boolean value of whether the value returned by the function was not undefined, null, or empty.

What I'm wondering is, is there really a difference between using the '!()' syntax over '()()'? Are there certain browsers that will complain?

Any thoughts are appreciated, thanks! XD

Answer 1

Nothing, they are just two different ways of achieving the same thing. The () is slightly more readable though.

Answer 2

What you're asking about is self-calling functions, otherwise known as IIFE (immediately invoked function expression). Which is a different thing from a closure. Although it does create a closure (indeed, all functions in javascript create closures, not just IIFE).

It's understandable that you may confuse the two issues though, since IIFE are usually introduced in the context of explaining closures. But be aware that they are different things. Closures are private, shared "global-like" variables. IIFE are functions that gets called immediately upon their definitions.

Now, how does IIFE work? The clue is in the name. It's the "FE" IIFE - function expression.

In javascript, as you know, there are two ways of creating functions - using function declarations:

function foo () {}

and using function expressions:

foo = function () {}

A function expression is simply a function declared in the context* of an expression. What are expressions in javascript? Simply any statement that evaluates something.

Traditionally, people recognize expressions as:

1. anything on the right side of the = sign

    a = /* expression */
   

2. anything in braces

   (/* expression */)
   

So traditionally those are the two "standard" ways for declaring function expressions:

foo = function(){}

and

(function(){})

And the second syntax makes it easy to then execute the function object returned by the expression. But, really, an expression is anywhere js does math (or logic, which is math anyway). So adding an operator to a function declaration also turns it into an expression. The following works because they are unary operators (meaning, they are legal without anything on the left hand side):

!function(){}()

+function(){}()

-function(){}()  // I especially like this one because it
                 // looks like a command line switch

typeof function(){}()

But you can also use binary operators if you use some throw-away value or variable with it. The following also work:

x=function(){}()
0==function(){}()
1*function(){}()
2/function(){}()

Heck, you can even abuse the ternary operator:

0?0:function(){}() // valid and works!

There's nothing magical about it. It's not a specific syntax baked into javascript. Just like (function(){}()) is not a specific syntax for IIFE. It's just that when declared in an expression, functions return themselves as objects which can be called immediately.

But I'd advise against using any of the non-standard forms above though. For the same reason you asked this question - most javascript programmers are not used to seeing them and it can cause confusion. I myself didn't realize that you can do this until you asked the question. Still, it's a useful thing to know for when you need to write things like minifiers, code generators etc.

---

* I'm using "context" in it's traditional definition here not the javascript specific meaning of "context" as defined in the spec.