JavaScript - The Module Pattern

javascript

// JavaScript - The module pattern:

// Create an anonymous function expression that gets invoked immediately,
// and assign its 'return value' to a variable. This approach "cuts out the
// middleman" of the named `makeWhatever` function reference.

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
}());

// `counter` is an object with properties, which in this case happen to be
// methods.

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined (`i` is not a property of the returned object)
i; // ReferenceError: i is not defined (it only exists inside the closure)

myObject = (function(){
    var netWorth;  // private variable
    var cry = function() { ... }; // private method
    return {
        birthYear: 1973, // public properties
        birthDay: 17,
        birthMonth: 2,
        getAge: function() { return blah; } // public method
    }
})();

Module Pattern in JavaScript use an IIFE, but instead of returning a function, 
it returns an object instead of a Function (and is generally implemented as a 
singleton). However, the object contains functions, and these functions, 
because they are defined inside the outer function, they all have access to 
the outer function's variables and arguments.

The Module Pattern approach is not only incredibly powerful, but incredibly 
simple. With very little code, you can effectively namespace related methods 
and properties, organizing entire modules of code in a way that both minimizes 
global scope pollution and creates privacy.

function makeCounter() {
  // The variable `i` is only accessible inside `makeCounter`.
  var i = 0;

  return function() {
    console.log( ++i );
  };
}

var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2

var counter2 = makeCounter();
counter2(); // logs: 1
counter2(); // logs: 2

// Note that `counter` and `counter2` each have their own scoped `i`.
// Each time that we invoke makeCounter(), the variable i is created, and it
// is that instance that is visible to the new function that get returned.

What is the module pattern?

// Create an anonymous function expression that gets invoked immediately,
// and assign its *return value* to a variable. This approach "cuts out the
// middleman" of the named `makeWhatever` function reference.

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
}());

// `counter` is an object with properties, which in this case happen to be
// methods.

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined (`i` is not a property of the returned object)
i; // ReferenceError: i is not defined (it only exists inside the closure)

Module Pattern in JavaScript use an IIFE, but instead of returning a function, it returns an object being returned instead of a Function (and is generally implemented as a singleton). However, the object contains functions, and these functions, because they are defined inside the outer function, they all have access to the outer function's variables and arguments.

The Module Pattern approach is not only incredibly powerful, but incredibly simple. With very little code, you can effectively namespace related methods and properties, organizing entire modules of code in a way that both minimizes global scope pollution and creates privacy.