javascript function vs. ( function() { ... } ());

I have often see expressions such as:

(function () {
    var x = 1;
    ...
}());

How do I interpret it? syntactically, this alone is a anonymous function definition.

function() {
...
}

what the () after that? and why put it in the enclosing ()?

Thanks

Solution 1:

Exactly the same, except that it is being invoked immediately after being converted into a function expression.

// v-----first set of parentheses makes the function an expression
   (function () {
       var x = 1;
       ...
   }());
//  ^-----this set is used to invoke the function

Same as if you did:

   var myfunc = function () {
       var x = 1;
       ...
   };
   myfunc();

or (similar) this:

   var returnValue = function () {
       var x = 1;
       ...
   }();

Get rid of the names, move the parentheses around, and you can see they're not that different.

Solution 2:

The area where I most often find this useful is in callback functions. This notation can also used in cases where you need to include a variable in a callback function, but you need the variable state to not be affected by what goes on outside the function.

 var someVal = 1;

 setTimeout( (function(one) {
      return function() {
           alert(one);  // alerts a 1 even 10 seconds after someVal++;
      }
 })(someVal), 10000);

 someVal++;  // the value in the setTimeout will remain the same as it is locked inside.

In this context, setTimeout takes a function that takes no arguments. So the question of how to pass in a value to that function is answered by creating a function that takes one argument that returns a function that takes 0 arguments.

I suggest anyone wanting to learn more about the power of this notation to play around with it in the Firebug JavaScript console. Once you wrap your head around this concept, you'll start to see areas where this powerful concept can be used.