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