Understanding Anonymous Functions

[L2L2L]

First of, thanks for the break down.

@felgall

(function() {
    // ...
})();

is an anonymous self executing function.

Since named functions in JavaScript are defined starting with the word “function” when a statement starts with the word function JavaScript assumes you are intending to define a named function. To make it anonymous you need to put something in front of the word function. The two common ways to do this are either to place a ! in front of the word function or to wrap the whole function in () - the example uses this second approach.

What good is a ! in front of it?

@felgall

A self executing function is one that has () added on the end - that makes it run straight away after it has been defined.

To use an anonymous function you either need to assign it to something (a variable or event handler) or execute it immediately after defining it as there is no way to reference it to run it later.

You mean by executing it immediately as in wrapping it in () with a pair of () following behind it? Precise clarity please

@felgall

So to split the above into pieces:

function () {
   // ...
}

This part is the definition of the anonymous function but it is not a complete statement as a statement that starts with function can’t be anonymous.

(function () {
   // ...
})

Now we have wrapped the anonymous function in () so that it can be a complete statement - although as it is anonymous there is no way to reference it from elsewhere in the code.

(function () {
   // ...
})()

Adding the () on the end runs the function straight away once it has been defined.

This is done in JavaScript because everything declared inside of a function is local in scope to that function. The effect of wrapping any JavaScript code inside of this self executing function wrapper is to take all of the variables it defines out of the global scope and make them local to that anonymous function. That allows you to easily add multiple scripts to the same page without worrying about whether they use the same variable names - which would cause the scripts to interfere with one another if those variables were global.

but by the variable being in a function in the first place already make it a local variable.