The Javascript Module Pattern

Among the most important and cool things I have learnt in Javascript, Module pattern occupies one among the top 5 spots. The things I like about this pattern are many. It makes scope resolution simple, hence simplifies the design.

To implement JS code using module pattern, you need to know IIFE (Immediately Invoked Function Expressions). As the name suggests you declare a function and immediately invoke it.

A great advantage of using module pattern is that you can have private variables and private methods which are otherwise not present in Javascript. Using module pattern, we can create a way to declare and use privates in Javascript.

The skeleton of the module pattern looks like this.

var MyModule = (function(params){

    var privateVariable = 10;

    var privateMethod = function(){

        //the code for private method

    }

    return {

       publicMethod1:function(){

        //public method 1 can use privateMethod and privateVariable

       }

       publicMethod2:function(){

         //public method 2 can use privateMethod and privateVariable

      }

  }

})();

Note that privateVariable and privateMethod are not accessible outside of the module. You can use the module “MyModule” in order to access the publicMethod1 and publicMethod2.

The call would look like this

var x = MyModule.publicMethod1();

This is the basic module pattern for you.

Now, if you understood the above piece of explanation properly, these will be the next questions you have.

1. This way of writing private methods is fine, but how can we use them from outside of the Module.
2. The module pattern is cool, but in real time this code would grow big and become eventually unmaintainable.

Well, to address these, we have to explain JS a little more.

Accessing private method.

This is where Javascript becomes awesome. The beauty of JS lies in calling the private methods from the public methods using the module.

Read the example below to see how private methods are called.

var MyModule = (function () {

 var privateMethod = function (message) {
    alert(message);
 };

 var publicMethod = function (text) {
    privateMethod(text);
 };
 
 return {
 publicMethod: publicMethod
 };

})();

// Example of passing data into a private method
// the private method will then alert 'Hello!'
MyModule.publicMethod('Hello!');

To address problem 2 there is a slight variation of the module pattern called the Revealing module pattern.

In revealing module pattern, both public and private methods are declared and defined in the module as named funtions instead of an object literal.

Here is how a revealing module pattern is implemented.

var MyModule = (function () {

 var privateMethod = function () {
 // Write some code for private method
 };

 var publicMethod = function () {
 // This is a public method.
 };

 var anotherPublicMethod = function () {
 // public method number 2
 };
 
 return {
 publicMethod: publicMethod,
 anotherPublicMethod: anotherPublicMethod
 };

})();

This is a real clean way of implementing module pattern when the code size is huge. This becomes easy to maintain and easy to read too.

Using this pattern, we can extend the module, pass the module into other modules and augment the modules to have more features and also implement inheritence of modules. All this will be covered in next blog.

Happy Javascripting…