What is the difference between (function(){ /* ... */ })(); and (function(){ /* ... */ }()); [duplicate]

Question

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.

Answer 1

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';  
}();

Answer 2

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.

Answer 3

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.