How should I declare my self-calling function?

Question

I've seen self-calling functions in Javascript written like this:

(function () {
    // foo!
})();

But I've also seen them written like this:

(function () {
    // bar!
}());

Syntactically, they do exactly the same thing. My personal habit is the first format, actually, but is there any difference between the two that I should be aware of? Like browser kinks or whatever?

One very trivial thing, for example, is if the second format should work reliably, then it would mean that something like this should be possible as well:

function () {
    // shut the front door! saved two characters right there!
}();

It hurts readability a good deal though.

i think this subject has been discussed more then enough, a little search on SO should have gave you the right answer. — Rafael Herscovici, Sep 06 '12 at 16:58
Possible duplicate: http://stackoverflow.com/q/7197480/401137 — Some Guy, Sep 06 '12 at 16:58
I always use your first construction and it works without fault. I believe the second will also work. The third will not work in all cases because the interpreter needs to know the difference between an expression and a function definition in some contexts. — jfriend00, Sep 06 '12 at 16:58
possible duplicate of [Location of parenthesis for auto-executing anonymous JavaScript functions?](http://stackoverflow.com/questions/3384504/location-of-parenthesis-for-auto-executing-anonymous-javascript-functions) — scrappedcola, Sep 06 '12 at 17:06
@Dementic ~ sorry about that. I *did* do a search, but I guess I didn't get hits because of differences in terminology. — Richard Neil Ilagan, Sep 06 '12 at 17:12

Andre Meinhold · Accepted Answer · 2012-09-06T17:04:11.363

4

First:

There is, like you assumed, absolutely no difference between the first two version of your self-invoking anonymous function. No browser klinks, quirks, just comes down to personal preference (Douglas Crockford calls the latter form "dog balls" by the way).

Second:

function() {
}()

will not work by design, since that statement creates a function statement/declaration. You need a function expression to immediately invoke itself. To create a function expression you can do multiple things. Putting the whole statement into parenthesis is one way, but you could also write

!function() {
}()

or

+function() {
}

All of these operators will make an expression.

edited Sep 06 '12 at 17:04

answered Sep 06 '12 at 16:58

Andre Meinhold

5,087
3
21
29

@Amaan — Because in that context it is a function expression, not a function declaration. Function declarations aren't allowed there. – Quentin Sep 06 '12 at 17:00
@Quentin: as far as I know, a function statement is just differnt wording for function declaration. – Andre Meinhold Sep 06 '12 at 17:00
function declarations can't exist inside parentheses. For more detail see here: http://benalman.com/news/2010/11/immediately-invoked-function-expression/ – Ben McCormick Sep 06 '12 at 17:07
@Andre ~ I didn't even see the function declaration syntax happening. Shame, shame. – Richard Neil Ilagan Sep 06 '12 at 17:09
@Amaan In that case the function is a _named function expression_. See http://kangax.github.com/nfe/ – Cameron Martin Sep 06 '12 at 17:19

David Hellsing · Answer 2 · 2012-09-06T17:10:38.867

1

The first two are identical, but if I remember correctly, one of them is preferred by jsLint (I think it’s the second).

The third raises a syntax error in most interpreters, but there are other variants:

!function() {
    alert('I’m executing myself!');
}();

var noname = function() {
    alert(noname); // undefined!
}();

You can replace the ! with a + or - ( None of them will make Crockford happy )

edited Sep 06 '12 at 17:10

answered Sep 06 '12 at 17:05

David Hellsing

106,495
44
176
212

TIL about `!` `+` and `-` forcing a statement. And yup, those won't make me happier either, but supposedly useful for minification / obfuscation, I suppose. – Richard Neil Ilagan Sep 06 '12 at 17:16

score 0 · Answer 3 · answered Sep 06 '12 at 16:58

This is mostly a convention issue.

(function () {}()); <- one less stack frame before execution (maybe)

(function () {})(); <- executed outside the parenthesis, so one tiny little frame before execution, although I don't like this style, IMO it's visually disconnected.

function () {}(); <- this is just bad practice IMO, it's not immediately obvious that this is an IIFE which is mostly due to convention, but this also has the problem that if you forget a semi-colon before the expression it will, under some conditions silently assign variables the value undefined.

Example:

var x = 0,
    y = 1,
    z = 3,

function () {
    alert("Z is now undefined, instead of throwing a syntax error.");
}();

As mentioned by Andre Meinhold, this is not in expression position.

score 0 · Answer 4 · answered Sep 06 '12 at 17:02

Pragmatically speaking, JSLint will complain about the first and prefer the second format. Beyond that, it's really personal preference and consistency is key here.

The third format will result in a SyntaxError, so you can't use that. That's because your creating a function declaration, not a function expression. It's the function expression that you're calling when you use the immediate function pattern.

score 0 · Answer 5 · answered Sep 06 '12 at 17:06

0

Crockford says to use (function () {...}()).

It's just a stylistic choice, but it's in the community's interest to agree upon a convention and (at the risk of starting a flame-war) why not use Crockford's?

answered Sep 06 '12 at 17:06

pdoherty926

9,895
4
37
68

score 0 · Answer 6 · answered Sep 06 '12 at 17:06

0

Also, keep in mind that (function () { }()); adds potential confusion. Since in a long function, someone not paying attention might see two closing parentheses and only one being opened.

answered Sep 06 '12 at 17:06

Kostia

6,284
1
18
15

And this is exactly why I ask, even if the thing seems soooo trivial. Right after reading @ethagnawl's answer, I read yours. Such is the developer environment, I guess. – Richard Neil Ilagan Sep 06 '12 at 17:11

How should I declare my self-calling function?

6 Answers6