How do you explain this structure in JavaScript?

Question

(function() 
 {
     //codehere
 }
)();

What is special about this kind of syntax? What does ()(); imply?

Answer 1

The creates an anonymous function, closure and all, and the final () tells it to execute itself.

It is basically the same as:

function name (){...}
name();

So basically there is nothing special about this code, it just a 'shortcut' to creating a method and invoking it without having to name it.

This also implies that the function is a one off, or an internal function on an object, and is most useful when you need to the features of a closure.

Answer 2

That is a self executing anonymous function. The () at the end is actually calling the function.

A good book (I have read) that explains some usages of these types of syntax in Javascript is Object Oriented Javascript.

Answer 3

The stuff in the first set of brackets evaluates to a function. The second set of brackets then execute this function. So if you have something that want to run automagically onload, this how you'd cause it to load and execute.

Answer 4

This usage is basically equivalent of a inner block in C. It prevents the variables defined inside the block to be visible outside. So it is a handy way of constructing a one off classes with private objects. Just don't forget return this; if you use it to build an object.

var Myobject=(function(){
    var privatevalue=0;
    function privatefunction()
    {
    }
    this.publicvalue=1;
    this.publicfunction=function()
    {
        privatevalue=1; //no worries about the execution context
    }
return this;})(); //I tend to forget returning the instance
                  //if I don't write like this

Answer 5

It's an anonymous function being called.

The purpose of that is to create a new scope from which local variables don't bleed out. For example:

var test = 1;
(function() {
  var test = 2;
})();
test == 1 // true

One important note about this syntax is that you should get into the habit of terminating statements with a semi-colon, if you don't already. This is because Javascript allows line feeds between a function name and its parentheses when you call it.

The snippet below will cause an error:

var aVariable = 1
var myVariable = aVariable

(function() {/*...*/})()

Here's what it's actually doing:

var aVariable = 1;
var myVariable = aVariable(function() {/*...*/})
myVariable();

Another way of creating a new block scope is to use the following syntax:

new function() {/*...*/}

The difference is that the former technique does not affect where the keyword "this" points to, whereas the second does.

Javascript 1.8 also has a let statement that accomplishes the same thing, but needless to say, it's not supported by most browsers.

Answer 6

John Resig explains self-executing anonymous functions here: http://tinyurl.com/4s6ut4

Answer 7

See also Douglas Crockford's excellent "JavaScript: The Good Parts," available from O'Reilly, here:

http://oreilly.com/catalog/9780596517748/

... and on video at the YUIblog, here:

http://yuiblog.com/blog/2007/06/08/video-crockford-goodstuff/