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

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.