Question

I understand the concept of variable scope in the following example, but can someone explain the function-wrapping syntax (...)();, e.g. how do you use it in actually day-to-day JavaScript programming? It’s not something that I know from PHP/Java/C#.

window.onload = function() {
    var i = 4;
    console.log(i); //4
    (function showIt() {
        var i = 'whatever';
        console.log(i); //whatever
    })();
    console.log(i); //4
};

Answer 1

There are several ways in which this form is useful. One is to lexically scope a segment of code so that its inner variables and methods stay separate from the larger body of code that contains it. In this way, it’s JavaScript’s way of doing block scoping. But the most common way I use this format is as an alternative to this:

var ret = {
    depth:0,
    initialized:false,
    helper:function() { /*help with some stuff*/ },
    initialize:function(){ /*do some initialization code*/ },
    action:function(){/*do the thing you want*/}
    destroy:function() { /*clean up*/ }
}

The thing that absolutely kills me about this format is it is extremely time consuming to find missing braces and commas. For example, the code above won’t work because the’s no comma at the end of the action declaration and unless I had pointed it out, you’d have had a hard time finding the problem because when the exception is thrown, it’s thrown on the entire statement, not the section that’s “causing the problem”. This is such a predictable problem that I simply don’t use this format any more if I can possibly avoid it. I refuse. Instead, the same can be written much more clearly as:

var ret = (function(){
    var self = {},
        initialized = false;

    var helper = function() { /*help with some stuff*/ };

    self.depth = 0;
    self.initialize = function() {/*do some initialization*/};
    self.action = function() {/*do the thing you want*/};
    self.destroy = function() { /*clean up*/ };

    return self;
}());

There are two big advantages for me. One, missing braces and commas can be found more easily (when the exception is thrown, the line number will be close to the area where it’s missing). And two, you can choose to keep some variables and methods private and you retain all the benefits of the first block of code.

And the last plug I’ll give for this format is that the code above (which is sort of like a Singleton) can be converted into a constructor by 1) removing the invocation braces on the outside, 2) changing self = {} to self = this, and 3) optionally removing the return self at the end:

var Ret = function(){
    var self = this,
        initialized = false;

    var helper = function() { /*help with some stuff*/ };

    self.depth = 0;
    self.initialize = function() {/*do some initialization*/};
    self.action = function() {/*do the thing you want*/};
    self.destroy = function() { /*clean up*/ };

    return self; // this is ignored by the compiler if used as a constructor
};
var ret = new Ret();