What is a self-executing anonymous function or what is this code doing?

Question

Consider:

var module = {};

(function(exports){

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };

}(module));

function notGlobalFunction() {
  console.log('I am global');
}

notGlobalFunction(); // Outputs "I am global"
module.notGlobalFunction(); // Outputs "I am not global"

What's going on here? I get that if you call notGlobalFunction(), it will just call the second function.

But what is var module = {} doing? And why is it called again inside the first function?

It says this is commonly known as a self-executing anonymous function, but what does that mean?

Rosetterosewall

Have you searched for "self-executing anonymous function"? There are good result both on the web and on stackoverflow. – Donella

A self-executing anonymous function is a anonymous function which executes itself ! – Hypocaust

yes i did but im still not sure what's going on in the first function. – Rosetterosewall

Technically, it's not self-executing since it doesn't call itself. As Bergi noted, IIFE is more correct. – Opponent

Answer 1

Immediately invoked functions are typically used to create a local function scope that is private and cannot be accessed from the outside world and can define its own local symbols without affecting the outside world. It's often a good practice, but in this particular case, I don't see that it creates any benefit other than a few more lines of code because it isn't used for anything.

This piece of code:

(function(exports){

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };  

}(module));

Would be identical to a piece of code without the immediate invocation like this:

module.notGlobalFunction = function() {
   console.log('I am not global');
};  

The one thing that is different is that in the first, an alias for modules called exports is created which is local to the immediately invoked function block. But, then nothing unique is done with the alias and the code could just as well have used modules directly.

---

The variable modules is created to be a single global parent object that can then hold many other global variables as properties. This is often called a "namespace". This is generally a good design pattern because it minimizes the number of top-level global variables that might conflict with other pieces of code used in the same project/page.

So rather than make multiple top level variables like this:

var x, y, z;

One could make a single top level variable like this:

var modules = {};

And, then attach all the other globals to it as properties:

modules.x = 5;
modules.y = 10;
modules.z = 0;

This way, while there are still multiple global variables, there is only one top-level global that might conflict with other pieces of code.

---

Similarly, an immediately invoked function creates a local, private scope where variables can be created that are local to that scope and cannot interfere with other pieces of code:

(function() {
    var x, y, z;

    // variables x, y and z are available to any code inside this immediately invoked function
    // and they act like global variables inside this function block and
    // there values will persist for the lifetime of the program
    // But, they are not truly global and will not interfere with any other global
    // variables and cannot be accessed by code outside this block.
    // They create both privacy and isolation, yet work just as well


})();

Passing an argument into the immediately invoked function is just a way to pass a value into the immediately invoked function's scope that will have its own local symbol:

(function(exports) {
    // Creates a local symbol in this function block called exports
    // that is assigned an initial value of module
})(module);

Modulus

thanks for the detailed answer. I really appreciate it! XD love this community. – Rosetterosewall

Good answer with nice attention to formatting. But instead of 'self-executing' function, it should be 'immediately invoked'; an important distinction. A 'self-executing' function would call itself from within itself. The parentheses after this kind of anonymous function merely call the function and are actually themselves outside the function's scope (therefore it is executed immediately, but not self-executing). I've made an edit to reflect this. – Hakeem

@Hakeem - I don't get why you think the phrase self executing function would be confusing to anyone or why immediately invoked function is a better way to communicate the concept. 'self executing function` is a commonly used phrase and seems to me a clear way to describe what is going on (note it was also used in the OP's question title) and I'm unaware of how it could be confused for anything else. I have not reverted your edit, but I am not convinced that your term is a better way to describe it. – Modulus

@Hakeem - Note the technically correct description would be something like immediately invoked anonymous function expression, but nobody wants to use that phrase in normal writing so I used a shorthand descriptive phrase self executing function which is only meant as a descriptive shorthand that is easy to associate with the concept. – Modulus

@Modulus Thanks for accepting the edit and sorry if it seems pedantic. The term was used in the question so I understand why you were using it in your response. Perhaps the question should also reflect this, or the answer could include a line like 'The pattern provided is not actually a self-executing function but an immediately invoked one.' I think the distinction is important as it is possible to have an actually self-executing function, i.e. one that calls itself from within. That's a very different thing from a function which is invoked immediately in order to create a closure. – Hakeem

@Modulus Immediately invoked anonymous function expression might be more accurate but the focus here is on the fact that the function is immediately invoked, not that it is anonymous. Immediately invoked 3-line anonymous function with one method would be more accurate still but not useful as a term. Immediately invoked function expression is only one word shorter, but you can use immediate function or the acronym IIFE for short. Self-executing function on the other hand is inaccurate and therefore misleading. Again, sorry if it seems pedantic. Hope the change makes sense now. – Hakeem

@Hakeem - I disagree. We're talking about what makes a better shorthand phrase for common use to describe the construct. This is a construct which executes itself (e.g. self executing). IIFE means nothing to someone who doesn't know what it is. That's an abbreviation, not a shorthand descriptive phrase. – Modulus

@Modulus Agree with you that IIFE means nothing to someone who doesn't know what it is. That's why I didn't include it in my edit of your answer. But immediately invoked function is a shorthand descriptive phrase, just like self-executing function. And I disagree that what we see here is a construct which executes itself. This is a self-executing function, which I created as an example to explain what I mean. If you check the console after it's run you will see that power() is called four times but only once outside itself. Hope this helps. – Hakeem

@Hakeem - no point in continuing the debate. I don't think your example is self-executing because it doesn't execute without being called first externally. Your example is recursive (e.g. it calls itself from inside the function body). – Modulus

@Modulus I can see where you're coming from and perhaps it's just best we agree to disagree (or move to a chat page) :-) I would only add two things in reply to your last comment: (1) that the construct given in the question doesn't execute first without being called externally; those parentheses are outside the scope of the function too, they just happen to be immediately outside it, and (2) that yes, my example is recursive, as self-execution and self-referentiality are by definition recursive. Thanks for an interesting discussion though. – Hakeem

Answer 2

This creates a new empty object:

var module = {};

It does the same as:

var module = new Object();

This wrapper:

(function(exports){
  ...
}(module));

only accomplishes to add an alias for the variable module inside the function. As there is no local variables or functions inside that anonymous function, you could do the same without it:

module.notGlobalFunction = function() {
  console.log('I am not global');
};  

An anonymous function like that could for example be used to create a private variable:

(function(exports){

  var s = 'I am not global';

  exports.notGlobalFunction = function() {
    console.log(s);
  };  

}(module));

Now the method notGlobalFunction added to the module object can access the variable s, but no other code can reach it.

Fluoric

Answer 3

"self-executing" might be misleading. It is an anonymous function expression, that is not assigned or or given as an argument to something, but that called. Read here on Immediately-Invoked Function Expression (IIFE).

what is var module = {} doing?

It initializes an empty object that is acting as a namespace.

why is it called again inside the fist function?

It is not "called", and not "inside" the first function. The object is given as an argument ("exports") to the IEFE, and inside there is a property assigned to it.

Donella

Answer 4

The IIFE is adding a method to the module object that is being passed in as a parameter. The code is demonstrating that functions create scope. Methods with the same name are being added to a object and the the head object (window) of the browser.

Quimper

Answer 5

Step by step explication of the code

var module = {};

(function(exports){

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };
    console.log(exports === module); // Writes true into the console

}(module));

function notGlobalFunction() {
  console.log('I am global');
}

notGlobalFunction(); // Outputs "I am global"
module.notGlobalFunction(); // Outputs "I am not global"

The following row declares a variable and assigns to it an empty object:

var module = {};

Among other things, it can be also used as namespace to prevent the pollution of the global scope.

---

The following row declares an anonymous function with a parameter named exports that will be available only inside the scope of the anonymous function itself:

(function(exports){

As already said, into the row above, the var exports is a parameter of the anonymous function it self and as we are going to see, it references (basically creates a local alias) that holds the same content that is inside the var module: this is because in Javascript objects are passed by reference.

---

The following rows:

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };

assign a method (= function inside an object) to the notGlobalFunction property crated into the object {} referenced into exports and also stored into the var module. So, basically, in other words, the part .notGlobalFunction will be a property, or more precisely in this case, will store a method that is going to be owned by both the two object vars, module and exports. So with this code and as a consequence of the above explication (in javascript object are passed by reference) the same property will be also available into the var module too as will be the whole function that it will hold. So after executing the above code both the vars exports and module will store/reference the same object, in fact:

module =
{
   notGlobalFunction: function() {console.log('I am not global');}
}

and

export =
{
   notGlobalFunction: function() {console.log('I am not global');}
}

and if right after the following code:

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };

you also do:

console.log(exports === module);

that is a strict comparison of the two objects, you will get true into the console because module and exports are basically storing/referencing the exact same object.

---

The following row passes to the parameter called exports of the anonymous function above, a reference to the empty object {} that was first stored into the var module with the code into the first row. So the var module here becomes an argument of the anonymous function above:

}(module));

so the object stored into the var module is passed as reference to the var exports, similarly to if we had done:

exports = module;

---

The rest of the code

function notGlobalFunction() {
  console.log('I am global');
}

notGlobalFunction(); // Outputs "I am global"
module.notGlobalFunction(); // Outputs "I am not global"

basically aims to demonstrate and compare the different availability and behaviors of global and local scopes/namespaces: the comments already present into the code are self esplicative.

Follows the code snippet:

var module = {};

(function(exports){

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };
    console.log(exports === module); // Writes true into the console

}(module));

function notGlobalFunction() {
  console.log('I am global');
}

notGlobalFunction(); // Outputs "I am global"
module.notGlobalFunction(); // Outputs "I am not global"

Punitive