What is the (function() { } )() construct in JavaScript?

javascript iife
Exitos picture Exitos · Nov 22, 2011 · Viewed 304.4k times · Source

I used to know what this meant, but I'm struggling now...

Is this basically saying document.onload?

(function () {

})();

Answer

gion_13 picture gion_13 · Nov 22, 2011

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created.

It has nothing to do with any event-handler for any events (such as document.onload).
Consider the part within the first pair of parentheses: (function(){})();....it is a regular function expression. Then look at the last pair (function(){})();, this is normally added to an expression to call a function; in this case, our prior expression.

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.
This is why, maybe, you confused this construction with an event-handler for window.onload, because it’s often used as this: 

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Correction suggested by Guffa:

The function is executed right after it's created, not after it is parsed. The entire script block is parsed before any code in it is executed. Also, parsing code doesn't automatically mean that it's executed, if for example the IIFE is inside a function then it won't be executed until the function is called.

Update Since this is a pretty popular topic, it's worth mentioning that IIFE's can also be written with ES6's arrow function (like Gajus has pointed out in a comment) :

((foo) => {
 // do something with foo here foo
})('foo value')

Related questions

Why do you need to invoke an anonymous function on the same line?

I was reading some posts about closures and saw this everywhere, but there is no clear explanation how it works - everytime I was just told to use it...: // Create a new anonymous function, to use as a wrapper (function(){ // …

Read More
What is the purpose of a self executing function in javascript?

In javascript, when would you want to use this: (function(){ //Bunch of code... })(); over this: //Bunch of code...

Read More
What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?

I have been reading a lot of Javascript lately and I have been noticing that the whole file is wrapped like the following in the .js files to be imported. (function() { ... code ... })(); What is the reason for doing this rather …

Read More