Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Is this basically saying document.onload?

(function () {  })(); 
like image 855
Exitos Avatar asked Nov 22 '11 14:11

Exitos


People also ask

What does function () do in JavaScript?

Points to Remember : JavaScript a function allows you to define a block of code, give it a name and then execute it as many times as you want. A function can be defined using function keyword and can be executed using () operator.

What is a function constructor in JavaScript?

Function() constructor The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues as eval() .

How do you assign a function to a variable with JavaScript constructor?

Following is the syntax to create a function using Function( ) constructor along with the new operator. The Function() constructor expects any number of string arguments. The last argument is the body of the function – it can contain arbitrary JavaScript statements, separated from each other by semicolons.

What are the 3 types of functions in JavaScript?

There are 3 ways of writing a function in JavaScript: Function Declaration. Function Expression. Arrow Function.


1 Answers

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') 
like image 143
gion_13 Avatar answered Sep 19 '22 21:09

gion_13