How do you explain this structure in JavaScript?

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

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

Answers:

Answer

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

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

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

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

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/

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.