!function(){ }() vs (function(){ })()

Question

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.

possible duplicate of Difference between (function(){})(); and function(){}();, Does parenthetical notation for self-invoked functions serve a purpose in Javascript? — outis
– outis, Commented Nov 29, 2011 at 4:45
@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
– icktoofay, Commented Nov 29, 2011 at 4: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
– jondavidjohn, Commented Nov 29, 2011 at 4:56
possible duplicate of What does the exclamation mark do before the function? — Matt Handy
– Matt Handy, Commented Jun 3, 2012 at 18:14

alex · Accepted Answer · 2011-11-29 04:53:38Z

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.

edited Nov 29, 2011 at 4:53

answered Nov 29, 2011 at 4:41

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2011-11-29 04:41:01Z

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

answered Nov 29, 2011 at 4:41

Pointy

415k62 gold badges600 silver badges631 bronze badges

4 Comments

alex Over a year ago

I would be very confused if someone used parseInt() like that :P

Pointy Over a year ago

Yes me too! The point is that the two in the original question represent choices of something less weird among the many possibilities :-)

Christophe Over a year ago

@Pointy Neither is more "hacky" than the other => do you mean that both are hacks, not regular js notations?

Pointy Over a year ago

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.

Ja͢ck · Accepted Answer · 2013-04-25 01:55:34Z

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

answered Apr 25, 2013 at 1:55

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

Comments

Narrateur du chaos · Accepted Answer · 2016-09-05 14:10:23Z

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.

answered Sep 5, 2016 at 14:10

Narrateur du chaos

6327 silver badges20 bronze badges

Collectives™ on Stack Overflow

!function(){ }() vs (function(){ })()

4 Answers 4

base.js

im-concat-to-base.js

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

base.js

im-concat-to-base.js

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related