Strange JavaScript syntax like this: (function(){//code}) (); ???

Question

What does the below JavaScript mean? Why is the function embedded inside ()?

(function() {
    var b = 3;
    a += b;
}) ();

Answer 1

This is an anonymous functions, which fires just after its creation.

Answer 2

Its an anonymous function.

Anonymous functions are functions that are dynamically declared at runtime that don’t have to be given a name.

Anonymous functions are declared using the function operator. You can use the function operator to create a new function wherever it’s valid to put an expression. For example you could declare a new function as a parameter to a function call or to assign a property of another object.

For further reading

Javascript anonymous functions

Anonymous functions can help make code more concise when declaring a function that will only be used in one place. Rather than having to declare the function and then use it you can do both in one step. It’s particularly useful for things like declaring event handlers and assigning methods to objects.

For example, if we’re creating a constructor function, we’ll need to declare the object’s methods and then assign them to the object’s properties so they can be called outside the object. It’s possible to declare the function and then assign it to a variable as a separate step like this:

function Pet(name, species, hello)
{    
          this.name = name;    
          this.species = species;    
          this.hello = hello;

          function sayHello()    
          {    
              alert(this.hello);    
          }

          this.sayHello = sayHello;    
      }

But it’s a bit more convenient and concise to do it all as one step:

 function Pet2(name, species, hello)
 {
      this.name = name;    
      this.species = species;    
      this.hello = hello;

      this.sayHello = function()      
      {     
          alert(this.hello);    
      }    
  }

Answer 3

It's functionaly equivalent to doing something like:

var myFunc = function(){
    var b = 3;
    a += b;
};

myFunc();

It's got the parenthesis around it (and trailing) so that the function is called immediately. As others have said, the concept is called an anonymous function.

Answer 4

What you wrote is an anonymous function called immediately. The reason for doing that is use of private variables. If instead of your code there would be:

var b = 3;
a += b;

b will be global variable. So if you need in global code private variable, that is the way to do this.

Answer 5

This are anonymous function which is executed in place.The best usage of this is to set some context or environment settings or have some side effect on load.

This are heavily used by Ajax Toolkits like JQuery,Dojo,etc to performs load time magic and workaround many browser quirks and shortcomings.

Answer 6

It's an anonymous function, that is called directly after creation, then thrown away.

It's inside a parenthesis to prevent a syntax error. Without the parentheses the keyword function needs to be followed by an identifier.

You can also do like this to put the function in a variable, and then call it:

var x = function() {
   var b = 3;
   a += b;
}
x();

Notice that the parentheses are not needed when the function keyword is not first.

Answer 7

Functions in javascript are objects and can be used as objects too. So for example you can do this:

var a = function() {alert("done");};
a();

This is commonly used in various functions where you have to pass some logic inside. For example the "sort" function for arrays expects a function object to be passed inside to determine how to sort the array:

var a = [{id: 15, name: 'test'},
         {id: 11, name: 'asd'},
         {id: 88, name: 'qweqwe'}];
a.sort(function(a,b) {
    if (a.id > b.id) return 1; //Put a after b
    if (a.id < b.id) return -1; //Put a before b
    if (a.id == b.id) return 0; //Don't make no changes
});

The 'sort' method then invokes the provided function with all kinds of array elements to sort it.

What your example does - it creates a function object and just instantly runs it.

Answer 8

Justin's answer explains it pretty well, but I thought I'd just add that the first set of parentheses (the opening one before function) is actually completely unnecessary as far as program execution is concerned. For readability, however, it's very important! When I see this:

(function() {

I know that this function is being called immediately, without having to scroll down to find the end of the block. This is important because sometimes you want to assign the return value of the function to a variable, and sometimes you want to assign the function to a variable. See:

var x = (function() {
    return 4;
})();

var y = function() {
    return 4;
};

// typeof x == integer (4)
// typeof y == function