30

While reviewing some of the code written in the Twitter Bootstrap Javascript, it looks like they're calling immediately invoked anonymous functions like this:

!function( $ ) {

     ...

}(window.jQuery || window.ender);

Where I've traditionally seen this same thing accomplished this way:

(function($) {

    ...

})(window.jQuery || window.ender);

The first way seems a bit hacky, and I'm not sure if there is any benefit or reason for doing it this way rather than the second way? Note that I understand how it works, I'm looking to understand why they chose that way to do it.

Tim Hallyburton
  • 2,741
  • 1
  • 21
  • 29
jondavidjohn
  • 61,812
  • 21
  • 118
  • 158
  • 10
    Here's [a blog post](http://www.wordsbyf.at/2011/10/31/i-dont-write-javascript/) by [the person that wrote it](http://www.twitter.com/fat). – icktoofay Nov 29 '11 at 04:44
  • possible duplicate of [Difference between (function(){})(); and function(){}();](http://stackoverflow.com/questions/423228/), [Does parenthetical notation for self-invoked functions serve a purpose in Javascript?](http://stackoverflow.com/questions/750231/) – outis Nov 29 '11 at 04:45
  • 3
    @outis: I don't believe that's a duplicate; this is asking why `!function(){}()` rather than `(function(){})()`, not `(function(){})()` vs `function(){}()`. (In some cases, the last will cause a syntax error. Neither of the first two will.) – icktoofay Nov 29 '11 at 04:47
  • thanks @icktoofay, now that i've read that and looked closer at how it is written... most of it annoys the shit out of me ;) – jondavidjohn Nov 29 '11 at 04:56
  • 1
    possible duplicate of [What does the exclamation mark do before the function?](http://stackoverflow.com/questions/3755606/what-does-the-exclamation-mark-do-before-the-function) – Matt Handy Jun 03 '12 at 18:14

4 Answers4

20
  • One less character when minified.
  • The ! should handle where other JavaScript code is concatenated before this and doesn't have a trailing semi-colon.

There is not a huge difference. I would use whatever you were more comfortable with. You should probably toss something at the start of your example to avoid...

base.js

var lol = function() {
   alert(arguments[0]);
}

im-concat-to-base.js

(function() {
    // Irrelevant.
})();

jsFiddle.

Toss in a leading ; and she works...

jsFiddle.

...or a ! like the Twitter Bootstrap...

jsFiddle.

alex
  • 479,566
  • 201
  • 878
  • 984
14

They're both ways of getting past the ambiguity in the grammar. Neither is more "hacky" than the other. It's just a style choice.

You could also do this:

0 + function( $ ) {
  // ...
} ( window.jQuery || window.ender );

Or:

parseInt(function( $ ) {
  // ...
} ( window.jQuery || window.ender ) );
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 14
    I would be very confused if someone used `parseInt()` like that :P – alex Nov 29 '11 at 04:47
  • Yes me too! The point is that the two in the original question represent choices of something *less* weird among the many possibilities :-) – Pointy Nov 29 '11 at 12:18
  • @Pointy Neither is more "hacky" than the other => do you mean that both are hacks, not regular js notations? – Christophe Feb 28 '12 at 01:55
  • 4
    They're all "regular" JavaScript idioms. The point is that the instantiation of a function is just a thing you can do in the middle of *any* JavaScript expression. – Pointy Feb 28 '12 at 04:06
3

Instead of the evaluation step of !undefined you could also use the void operator to remove the ambiguity:

void function($) {
     ...
}(window.jQuery || window.ender);

Has a kind of C quality to it ;-)

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
1

One answer that I've yet not seen is that it avoids surrounding your entire function with parentheses. Outside of aesthetic considerations, this can be a plus for some editors which use parentheses to determine the level of indentation of a line.

Narrateur du chaos
  • 415
  • 4
  • 18