(...()) vs. (...)() in javascript closures

JavascriptComparisonClosuresAnonymous FunctionJslint

Javascript Problem Overview


I know this is silly, but there's any difference between this:

(function() {  
    var foo = 'bar';  
})();

and this?

(function() {  
    var foo = 'bar';  
}());

JSLint tells us to Move the invocation into the parens that contain the function, but I see no need to.

Edit: The answers are too cool. ~function, the JSHint alternative along with jQuery's preference for (/***/)(); and Crockford's explanation! I thought I was going to just get a "they're the same thing" kind of answer.
You guys decide the best one through upvotes and I tick it.

Javascript Solutions


Solution 1 - Javascript

There's no difference. Both are valid ways to get the JavaScript parser to treat your function as an expression instead of a declaration.

Note that + and ! will also work, and are sometimes used by minifiers to save a character of size:

+function() {  
    var foo = 'bar';  
}();

!function() {  
    var foo = 'bar';  
}();

EDIT

As @copy points out, for completeness, ~ and - will also work.

-function() {  
    var foo = 'bar';  
}();

~function() {  
    var foo = 'bar';  
}();

Solution 2 - Javascript

That JSLint violation exists because Douglas Crockford says that the outside-parentheses version looks like "dog balls".

You can hear him discuss it in this video:

> I think that looks goofy, 'cause what we're talking about is the whole invocation, but we got these things hanging outside of it looking sorta like ... dog balls.

He suggests that the parentheses inside help the reader understand that the entire statement is a function expression rather than a declaration.

Solution 3 - Javascript

No, I don't believe there's any difference. I personally prefer the former (and jQuery et. al. seem to agree) but they both work identically in every engine I've tested.

Also, JSLint is a little too strict sometimes. JSHint might be a little better in that regard.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCamilo MartinView Question on Stackoverflow
Solution 1 - JavascriptAdam RackisView Answer on Stackoverflow
Solution 2 - JavascriptRob HruskaView Answer on Stackoverflow
Solution 3 - JavascriptRy-View Answer on Stackoverflow