Revealing Module Pattern in Javascript & quick tips

Revealing module pattern is a design pattern, which let you organise your javascript code in modules, and gives better code structure. It gives you power to create public/private variables/methods (using closure), and avoids polluting global scope (If you know how to avoid that).

How it works:

It uses IIFE (Immediately invoked function expression: (function(){})();) to wrap your module function, thus creating a local scope for all your variables and methods.

var returnedValue = (function() { })();

From this function, you return an object containing methods you want to expose to public code to call.

Only public methods will have access to your private code inside IIFE, because of closure (Local function has access to parent functions’s scope variable/methods)

Example code:

var namesCollection = (function() {
    // private members
    var objects = [];
    
    // Public Method
    function addObject(object) {
        objects.push(object);
        printMessage(object);
    }
  
    // Private Method
    function printMessage(object) {
        console.log("Object successfully added:", object);
    }
    // public members, exposed with return statement
    return {
        addObject: addObject,
    };
})();

We are storing returned public methods in namesCollection variable. Now you can call namesCollection.addObject() method, which is a public method. But can not call printMessage method because this is not exposed in return.

Improving Code Readability

You can add some changes to above code to make it more readable, if you have too many methods inside your module.

• Putting “return” statement at the top of the file: so that if other developers open your module’s code, they can quickly see what methods are exposed as public, instead of scrolling down to end of the file.
• Naming convention: You can check above code, you will find that you can’t tell which function is private and which is public. To deal with this, you can prefix your private function name with underscore.

After these changes your code will look this:

var namesCollection = (function() {
    // private members
    var objects = [];
    // public members, exposed with return statement
    return {
      addName: addObject,
    };
    
    // Public Method
    function addObject(object) {
      objects.push(object);
      _printMessage(object);
    }
  
    // Private Method - Prefixed with single underscore
    function _printMessage(object) {
      console.log("Object successfully added:", object);
    }
})();

Now you can say that _printMessage is private method, just by looking at it.

Note: It is safe to return from Module function before your member function declaration. All your function declaration will get hoist.

Bonus tip:

• Use named function, instead of anonymous: If you have used event binding in javascript, you have used anonymous function to bind an event, like:

var someID = document.getElementById('someID');
someID.addEventListener('click', function() {
  // Perform some magic
});

Instead of this you can separate the anonymous function and make it named function, which you can call separately as well. e.g.:

// Binding event
someID.addEventListener('click', __someMagicCode);
anotherID.addEventListener('click', __someDarkMagicCode);
// Event binding Function - Prefixed with double underscore
function __someMagicCode() {
  // Perform some magic
}
function __someDarkMagicCode() {
  // Perform some dark magic
}

As you can see your code has become more readable now, since your event bindings are at top and their respective functions are at bottom.

Now you can call __someMagicCode function, without depending on user event.

You can use double underscore prefix for event binding function, to separate it from private functions.

Code sample taken from: Toptal Blog: Comprehensive Guide Javascript Design Patterns