What is the Module in JS

Module is an integral piece of any quality application’s architecture and can help in keeping the units of code for a your project both cleanly separated and organized.

This pattern is used to mimic classes in traditional software engineering and create on public and private access to methods & variables. The module pattern was improved by the reduction of global scope variables, thus decreasing the chances of collision with other code throughout an application.
The module pattern use many projects such as jQuery, Dojo, ExtJS and YUI.

The Module patterns were originally defined as a ways to provide both private and public encapsulation for classes in conventional software engineering.

Let’s looking at an example implementation of the Module pattern by creating a module which is self-contained.

var testModule = (function () {
 
  var i = 0;
 
  return {
 
    increment: function () {
      return i++;
    },
 
    reset: function () {
      console.log( "counter value prior to reset: " + i );
      i = 0;
    }
  };
 
})();
 
// Example of usage:
 
// Increment our counter
testModule.increment();
 
// Check the counter value and reset
// Outputs: counter value prior to reset: 1
testModule.reset();

Above, other parts of the code are unable to directly read the value of our methods increment() or reset(). But i variable is fully shielded from our global scope

Example Module Pattern JavaScript

We may find useful example, that can to define a simple template that we use for getting started with it.
Below we can see example that covers namespacing, public and private variables.

var myNamespace = (function () {
 
  var myPrivateVar, myPrivateMethod;
 
  // A private counter variable
  myPrivateVar = 0;
 
  // A private function which logs any arguments
  myPrivateMethod = function( foo ) {
      console.log( foo );
  };
 
  return {
 
    // A public variable
    myPublicVar: "foo",
 
    // A public function utilizing privates
    myPublicFunction: function( bar ) {
 
      // Increment our private counter
      myPrivateVar++;
 
      // Call our private method using bar
      myPrivateMethod( bar );
 
    }
  };
 
})();

Let’s begin looking at another example, below we can see a shopping basket implemented using module pattern. This module is self-contained in a global variable called basketModule and has private array basket and so other parts of our application are unable to directly read it. So the only methods (ie. addItem(), getItemCount() etc) able to access it are those with access to its scope.

var basketModule = (function () {
 
  // privates
 
  var basket = [];
 
  function doSomethingPrivate() {
    //...do something
  }
 
  // Return an object exposed to the public
  return {
 
    // Add items to our basket
    addItem: function( values ) {
      basket.push(values);
    },
 
    // Get the count of items in the basket
    getItemCount: function () {
      return basket.length;
    },
 
    // Public alias to a private function
    doSomething: doSomethingPrivate,
 
    // Get the total value of items in the basket
    getTotal: function () {
 
      var q = this.getItemCount(),
          p = 0;
 
      while (q--) {
        p += basket[q].price;
      }
 
      return p;
    }
  };
})();
// Usage
// basketModule returns an object with a public API we can use
 
basketModule.addItem({
  item: "milk",
  price: 1.5
});
 
basketModule.addItem({
  item: "butter",
  price: 0.8
});
 
// Outputs: 2
console.log( basketModule.getItemCount() );
 
// Outputs: 0.8
console.log( basketModule.getTotal() );
 
// However, the following will not work:
 
// Outputs: undefined
// This is because the basket itself is not exposed as a part of our
// the public APIs
console.log( basketModule.basket );
 
// This also won't work as it only exists within the scope of our
// basketModule closure, but not the returned public object
console.log( basket );