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.

Improve this question
5

4 Answers 4

Reset to default
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.

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

Comments

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 ) );
Improve this answer

4 Comments

I would be very confused if someone used parseInt() like that :P
Yes me too! The point is that the two in the original question represent choices of something less weird among the many possibilities :-)
@Pointy Neither is more "hacky" than the other => do you mean that both are hacks, not regular js notations?
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.
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 ;-)

Improve this answer

Comments

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.