2

Possible Duplicate:
javascript function vs. ( function() { … } ());

Sorry if this is too basic, but what is this construct do?

(function MyFunction() {
  /* Some codes ... */    
})();

Maybe there is a special term for that? It can be useful for Googling, instead of just putting that snippet in the search field.

2
  • 2
    It's an self-invoking anonymous function. MyFunction outside this declaration will not refer to the function, but inside it, MyFunction can be used to invoke itself again. Commented Dec 28, 2011 at 13:44
  • Please note, in IE ( lte 8 ) MyFunction will be leaked to global scope :) http://jsfiddle.net/DEn4e/ Commented Dec 28, 2011 at 14:02

5 Answers 5

6

It's called the direct invocation pattern. It defines an anonymous function, and then immediately executes it. This is useful for 'private' variables and such. If you'd normally do this:

// global namespace
var data = 'lol';
function getData() {
  return data;
}

there'd be a variable data in the global namespace and if someone entered data = 123 in a web console it could break your script. Using the direct invocation pattern, you can do this:

// global namespace
/*lotsofcodehere*/
(function MyFunction() {
  // closure namespace
  var data = 'lol';
  this.getData = function getData() {
    return data;
  }
})();
// global again

In this case, the function getData will still exist in the global namespace, but data will be inaccessible from outside the closure namespace.

You'll also notice MyFunction won't exist in the global namespace when using this pattern. That is because of one of many small language rules, but basically a function is always available by it's name inside the function. If you have something like this:

// returns the amount of from--s needed to get to 0 :D
// (yes, it returns it's input number :D)
(function() {
var i = 0, keep = false;

this.countToZero = function(from) {
  if(from === 0) {
    keep = false; // don't keep i's contents on next invocation
    return i;
  }
  if(!keep) i = 0; // reset i on first invocation
  i++;
  keep = true;
  return countToZero(from - 1);
}
})();

It works perfectly, and countToZero(5) will nicely return 5. But well, it's not really nice if you use it in the non-global namespace, if this is used inside a function it'll define countToZero as a member property of that function, which will break our return (as countToZero is no longer accessible through the global namespace)
This is not a realistic scenario perhaps, but it works for this example. Instead of the above code, we'll use this:

/*code*/
this.countToZero = function countToZero(from) {
  // countToZero will *always* exist here as a reference to this function!
  /*code*/
  return countToZero(from);
};

This code is quite hard to break, except if you pass Infinity as the first param of course, even if you use it in completely ridiculous ways.

...

did I say I was going to provide clear explanation or nice, real-life examples? I hope I didn't

Sign up to request clarification or add additional context in comments.

3 Comments

If I understand this correctly, that anonymous function will immediately execute. But, how can we get the return value i.e. data? Is it assignable to a different variable?
You can not access data from outside the function, as it is a variable private to that function. Functions can, however, access all variables in functions above them, so data is available to getData. There's probably a better explanation out there somewhere, a search query for 'function scoping javascript' should do the trick ;)
data is available within the function it is defined in. You either pass it around as an argument in other function calls or bind to events which will be called once those events happen.
4

It creates and executes the function MyFunction without placing it on the global namespace. This is a good way to avoid namespace pollution. Once executed, it cannot ever be executed again, since it wasn't actually saved anywhere.

4 Comments

Can I place it inside another function?
Yes, you can place it anywhere where other function calls are allowed.
@AndrewD. Note the once executed. It can only reference the function while executing.
@Tom van der Woerdt: "can only reference the function while executing" is not same as "it cannot ever be executed again".
2

This basically invokes code in MyFunction() without adding it to the global namespace, needless to say ofcourse that variables defined in MyFunction will not be available in global as well.

I've seen this construct most of the times in conjunction with the need to execute a piece of code that has recursive logic that needs to be hidden, e.g. traversal of certain sub subdocuments to the page.

Comments

1

It's a self-executing function. You define the function, with or without a name, and immediately execute it.

4 Comments

Thanks, @Josh. How would you do it without a name?
@Siku-Siku.Com (function(){/*...*/})();
+1 Thanks for the super quick response!
I prefer the term "immediately executed" rather than "self-executing", because the latter implies that the function calls itself from within its body (i.e, a recursive call).
0

function is called immediately after define it.

This works that :

function MyFunction() {
  /* Some codes ... */    
} 
MyFunction(); 

But does not have access to MyFunction in the global scope, That means - you don't have acces from anywhere ( except IE <= 8 => http://jsfiddle.net/DEn4e/) Therefore do not recommend because it causes leaks variables to global scope :)

5 Comments

This is not strictly equivalent as MyFunction in your example is accessible beyond the invocation and can be called normally.
That is not true. It doesn't get stored on the global namespace, which does happen in your case.
Really? put to address bar in ie : javascript:(function MyFunction() { })();alert( MyFunction);
The code in the question won't make the function globally available, but the code in this answer will. I think that's what the previous comments were saying.
Check this out on IE lte 8 => http://jsfiddle.net/DEn4e/; If you have IE9 press F12 to set compability mode. Unfortunately still a lot of people are working on these versions

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.