JavaScript self-invoking functions [duplicate]

Question

Possible Duplicate:
Difference between (function(){})(); and function(){}();
Are “(function ( ) { } ) ( )” and “(function ( ) { } ( ) )” functionally equal in JavaScript?

I just wondered whether there is a difference (regarding the functionality) between these two examples:

1st

(function foo() {
console.log("bar")
})()

2nd

(function foo() {
console.log("bar")
}())

Both seem to work fine ...

Thanks!

Ulane

Answer 1

They are exactly the same. There is no difference whatsoever between the two in terms of efficiency, output, or use. Using either one is a matter of preference.

Though there is a shorter variation of the two forms commonly used by JS minfiers. That is, logical NOT-ing the function expression and calling it:

!function() {
    console.log( x );
}();​

Bola

Answer 2

No difference. In fact, you need to use () only because plain...

function() { console.log('bar'); } ();

... won't be properly recognized by JS parser. As said in the ES5 standard:

Also, an ExpressionStatement cannot start with the function keyword because that might make it ambiguous with a FunctionDeclaration.

The alternative (to (...)) solution is augmenting this statement with some unary operator. Both...

+function() { console.log('bar'); } ();

... and ...

!function() { console.log('bar'); } ();

... will work.

Wader

Answer 3

There's no difference between them. Both are immediately invoked function expressions. Some people like Douglas Crockford prefer the second method. Some prefer the first. Interestingly Crockford's JSLint doesn't allow the first method, so I assume that the second one is more common.

Oh, and if you use a function declaration instead of a function expression then you can call the function before it appears in the program. This is because declarations are hoisted in JavaScript:

greet(); // This will work

function greet() {
    alert("Merry Christmas!");
}

The same is not true for function expressions:

greet(); // This will not work

var greet = function greet() {
    alert("Merry Christmas!");
};

That's pretty much all you need to know for now.

Silkweed

function greet(), though valid, doesn't make sense. Just var greet = function () is all that's needed. – Photophore

@Photophore - Doesn't make sense as in? It makes perfect sense to me. – Silkweed

What is the point of a name that cannot be used? It makes as much sense as function () { var greet; } if greet is never used. – Photophore

@Photophore - The name is used. See for yourself: jsfiddle.net/HhpH4/1 – Silkweed

I'm sorry, I was unclear. var greet = function greet () {} is what I was talking about. See what I mean. It is useless to give a function a name on the right hand side of an expression. – Photophore

@Photophore - Well that's because named function names are local variables. You can only access them from the function itself. However a function declaration name can be accessed from the containing scope and since declarations are hoisted you can call the function before the definition. – Silkweed

@ErikE, not completely. var wish = function greet(){}; alert(wish.name); will produce "greet" – Ducktail

@BrianS I know that and consider it so minor as to be immaterial. I have never seen in production code any practical use for the .name property of a named function. – Photophore

@ErikE, Tracking the call stack in a sandboxed JS environment? More something for "development" use than "production" use, but the use is there. github.com/shdwjk/TheAaronSheet/blob/master/… – Ducktail

@BrianS if you need to do that, then yes, name your functions! – Photophore

@BrianS I always name my functions for the sake of debugging, unless I'm 100% certain that the function expression will never throw an error. Also, I prefer using function declarations over function expressions. I prefer writing function greet() {} over var greet = function () {} for three reasons. First, I can move my function definitions to the bottom (usually past the last return statement). That way my code is cleaner. Second, named functions aid in debugging. Third, function declarations are usually faster than function expressions. – Silkweed