Module Pattern in JavaScript

In JavaScript, code encapsulation can be achieved using Modules Patterns. In addition, it is used to create private and public properties. There are various ways a module pattern can be implemented. In this article, we will learn to create a module pattern in ES5.  Before we go ahead and start looking into implementation of the module pattern, here are some of the benefits:

• Freeze the scoping
• Code encapsulation
• Creating private or public scope
• Creating a namespace
• Creating public and private encapsulation

We can implement a module pattern using JavaScript Object Literals and Immediately- Invoked function expression. Just to refresh your memory, an object literal will look like the below listing:

var Product = {
 
    price: 600,
    setOrder: function () {
        return this.price;
    }
}
 
console.log(Product.setOrder());

You can add properties after creation of object. Also, an Immediately- Invoked function expression looks like the example below:

var add = function (num1, num2) {
    let res = num1 + num2;
    console.log(res);
}(7, 2);

 With combination of these two, we can implement Module Patterns in JavaScript. Let us start with creating the module:

(function () {
    'use strict';
    // Your code here
    // All function and variables are scoped to this function
    var price = 99;
 
}());
 
console.log(price); // undefined 

It is a self-contained module or an anonymous closure. It creates the scope for the function and everything is wrapped inside that function itself. So, when we tried to access price outside the function,  it was undefined. Keep in mind that this anonymous module is present in the global scope.  

We can export the module by assigning it to a variable using expression, and then creating private and public encapsulation using the return statement. Consider below code:

var module1 = (function () {
    'use strict';
 
    //private 
    let color = 'red';
 
    // public 
    return {
        price: 800
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.color); // undefiend 

We are doing following in above code snippet,

1. Creating an IIFE.
2. Assigning IIFE function to a variable
3. Returning an anonymous object literal to create private and public encapsulation.

 All properties of returned object would become public and can be accessed outside the module, however, any variable not part of the returned object cannot be accessed outside module. That is why for price we are getting 800 as the output, but, for color, value is undefined because it is private to the module1. Let us modify module1 to have more private and public properties, as shown in the listing below:

var module1 = (function () {
 
    //private 
    let color = 'red';
    let model;
    function setModel(m) {
        model = m;
    }
    // public 
    return {
        price: 800,
        getModel: function (m) {
            setModel(m);
            return model;
 
        }
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.getModel('bmw')); // bmw

As you see that, we can access private encapsulated variables using the public encapsulated functions.  Mainly in module pattern, every variable is private until it is part of return object.

Module pattern emulates classes in JavaScript. It creates private and public encapsulated variables by returning an object. It encapsulates privacy using closures. In a diagram, we can show:

Another variation of module pattern is Revealing Module Pattern. The only variation is we return object as shown in the listing below:

var module1 = (function () {
 
    //private 
    let color = 'red';
    let model;
    function setModel(m) {
        model = m;
    }
    let privatePrice = 800;
    let getModel = function (m) {
        setModel(m);
        return model;
 
    }
    // public 
    return {
        price: privatePrice,
        model: getModel
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.model('audi')); // audi 

Module Revealing Pattern has more consistent naming and better readability of the code. To summarize using module pattern, we can achieve public and private encapsulation in JavaScript. I hope you find this post useful and now implement Module Pattern in your JavaScript application.  

 hope you find this post useful. Thanks for reading.  If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.