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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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,
- Creating an IIFE.
- Assigning IIFE function to a variable
- 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:
Dhananjay Kumar 
Leave a Reply