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

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?

Solution

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);