“JavaScript is a lightweight, interpreted, object-oriented programming language with first-class functions most commonly known as a scripting language for web pages.”
Introduction
Every Javascript programmer strive to write clean and reusable code as it allows them to clearly communicate with the next developer who works with what they have written. In the software development world, writing clean code helps everyone to fix the problem easily when they arise. To be a better developer, teammate or employee, one should write more declarative code which will be easier to read, easier to understand and easier to change and which can communicate better for future use by the same or other developer.
Here it comes the concept of “Design Pattern”. A Design Pattern helps to write beautiful, clean, structured and maintainable code by applying latest best practices to the language. We can use the patterns as templates through which we can solve problems in different situations.
“Each pattern describes a problem which occurs over and over again … and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without doing it the same way twice.”
Christopher Alexander
Module Pattern
This is one of the core and important pattern in Javascript. This is widely used to couple a set of variables and functions together in a single scope independent of other components. A module is nothing but a file or class which contains different behavioral code compared to a normal script. While wrapping the public and private variables/methods inside a single object, it reduces the chance of conflicting of function names with other functions from other scripts. Let us quickly check one simple example –
A Simple Example
var exampleModule = function() {
var counter = 0;
function changeBy(val) {
counter += val;
}
function increment() {
changeBy(1);
}
function decrement() {
changeBy(-1);
}
function getValue() {
return counter;
}
return {
add: increment,
subtract: decrement,
value: getValue
}
}
const module = exampleModule();
console.log(module.value()); // Returns 0
module.add();
module.add();
module.add();
console.log(module.value()); // Returns 3
module.subtract();
console.log(module.value()); // Returns 2
So, what we did above, any guess? We did nothing but executed one simple example class utilizing an immediately invoked function expression. It means Modules should be Immediately-Invoked-Function-Expressions (IIFE) to allow for private scopes. This is how a module pattern template looks like –
Module Pattern Template
(function() {
// declare private variables and/or functions
return {
// declare public variables and/or functions
}
})();
Revealing Module Pattern
A different variation of Module Pattern is called the Revealing Module Pattern. It differentiate from Module Pattern in terms of how the revealing module pattern exposes it’s API.
Revealing Module Pattern Template
var revealingmodule = function () {
// private variables (made public by an alias)
// private functions (made public by an alias)
return {
// alias to functions and vars
// you want to make public
};
}();
A Simple Example
var exampleModule = function(counter) {
function changeBy(val) {
counter += val;
}
function increment() {
changeBy(1);
}
function decrement() {
changeBy(-1);
}
function getValue() {
return counter;
}
return {
increment: increment,
decrement: decrement,
getValue: getValue
}
}(5);
console.log(exampleModule.getValue()); // Returns 5
exampleModule.increment();
exampleModule.increment();
exampleModule.increment();
console.log(exampleModule.getValue()); // Returns 8
exampleModule.decrement();
console.log(exampleModule.getValue()); // Returns 7
The above example looks quite similar to the module pattern with a very tiny difference of not using “new“ keyword and adding a simple parenthesis just after the function declaration. This method of writing the code knows as self-calling function. One more difference is in the return statement for which we no need to use aliases as we were doing for module pattern.
Pros of Module Pattern
1. We can have the flexibility to modularize scripts in reusable objects
2. Implement encapsulation with which we can use private methods and expose public methods as and when required
3. We can remove variables and functions from the global scope and can wrap those into classes
Cons of Module Pattern
1. It is very hard to extend and override the class variables and functions
2. The scoped functions get duplicated across many objects in memory as in how many times the object get used
3. The pattern adds little complexity on code debugging
Conclusion
In this article, we have checked how the Module Pattern can be used to provide code encapsulation which leads to write clean and reusable code which will be easier to maintain throughout the application. The logical independent block of code are relatively easier to update and maintain and using which we do not need to define the same functions at multiple places. This pattern really works great for when you want to simply build a means of allowing others to create objects they will use without the need for extension or modification. So, that’s it! I hope this article helps you. Please add comments or feedback if you have any. Thank you!