The Module Design Pattern in JavaScript: Explained with Examples

The module design pattern in JavaScript allows you to divide your code into independent parts, promoting well-structured code. We’ll show you how it works.

In the world of JavaScript programming, modules are the order of the day when it comes to keeping parts of your code independent of other components. This promotes loose coupling and ensures well-structured code.

For those familiar with object-oriented programming languages, modules are akin to “classes” in JavaScript. One of the many benefits of classes is called “encapsulation,” which involves protecting states and behaviors from access by other classes. The module pattern enables both public and private access levels.

Modules should be created as “Immediately-Invoked Function Expressions” (IIFE) to enable private scopes. This means that variables and methods are protected, and an object is returned instead of a function. Here’s an example:

        (function() {
            // Declare private variables and/or functions
            return {
                // Declare public variables and/or functions
            }
        })();

Let’s illustrate this with a concrete implementation:

        var HTMLChanger = (function() {
            var contents = 'Contents';

            var changeHTML = function() {
                var element = document.getElementById('attribute-to-change');
                element.innerHTML = contents;
            }

            return {
                callChangeHTML: function() {
                    changeHTML();
                    console.log(contents);
                }
            };
        })();

        HTMLChanger.callChangeHTML();       // Outputs: 'Contents'
        console.log(HTMLChanger.contents);  // undefined

Revealing Module Pattern

A variation of the module pattern is known as the “Revealing Module Pattern.” Its purpose is to maintain encapsulation while exposing specific variables and methods returned within an object literal. The direct implementation looks like this:

        var Exposer = (function() {
            var privateVariable = 10;

            var privateMethod = function() {
                console.log('Inside a private method!');
                privateVariable++;
            }

            var methodToExpose = function() {
                console.log('This is a method I want to expose!');
            }

            var otherMethodIWantToExpose = function() {
                privateMethod();
            }

            return {
                first: methodToExpose,
                second: otherMethodIWantToExpose
            };
        })();

        Exposer.first();        // Output: This is a method I want to expose!
        Exposer.second();       // Output: Inside a private method!
        Exposer.methodToExpose; // undefined

Overall, JavaScript modules and the Revealing Module Pattern provide a powerful way to organize and protect your code. Choose the model that best suits your requirements and benefit from better-structured and maintainable code. MongoDB Security Best Practices for Network Access Control Explained with Examples