Module and Revealing Module Patterns in JavaScript

This is the second post in the series of two posts on managing scope in JavaScript. In the first post, I discussed Immediately Invoked Function Expressions (IIFE) in detail. If you are not familiar with IIFE and haven’t got a chance to read the previous article, I will recommend you read that first before going any further.

This post will focus on Module and Revealing Module patterns in JavaScript. When we think about object oriented programming, the first thing that comes in mind is a class. What is a class? Simply speaking, a class is an encapsulation of variables and methods. A class may have public and private members. Depending on what information you want to expose outside the class, you can make the relevant variables and methods public and rest of the things that should not be exposed publicly can be kept private.

JavaScript is an object oriented language. But JavaScript doesn’t support private variables and functions out of the box. However, there are ways to achieve the same private-public construct in the language. Any function in JavaScript is assigned global scope by default. Take a look at the following function:

function keepMePrivate() {
   console.log("Let others not bother what I do!");
}

Function keepMePrivate could be called from anywhere and is accessible globally. There are situations when you want to keep some of your functions (or even variables) private. This is where Module Pattern pitches in. Have a look at the following code:

var module = (function() {
   console.log("You have started learning about a Module");
}());

You must be remembering IIFE pattern we learnt in the previous post. I declared an IIFE that writes a simple message to browser’s console. IIFE creates a local scope and keeps all the variables and functions inside of it as private. We can then return only those variables & functions to the outside world that we want to expose publicly. I assigned the IIFE to a variable module. By doing this, I’m creating a module that is globally accessible. However, this module is good for nothing until now. This will evolve gradually to something real and working.

var module = (function() {
   var privateVar = "Stop thinking about me dear foreigners";
   var privateFunc = function() {
      console.log("You are now learning how to create private functions.");
   };
}());

Now we have a variable privateVar and a function privateFunc that are private to the IIFE block. Any attempt to use them outside is not a punishable offence :) but will certainly throw an error leaving your JavaScript code breaking. Our module is still useless as we are not returning anything from IIFE block yet. Let’s move on.

var module = (function() {
   var privateFunc = function() {
      console.log("I'm private. Only my family knows what I do.");
   }
   return {
      publicVar: "Good things are available to good people.",
      publicFunc: function() {
         privateFunc();
         console.log("Keep focused and learn to create public functions");
      }
   };
}());

We have reached a point where we have a working module. The IIFE above returns an object with publicVar as a property and publicFunc as a method. This is called object literal way of creating objects. You can read more about object literals in my post on JavaScript objects.

The returned object is assigned to the variable module. Function privateFunc is accessible from within publicFunc. Any code outside of IIFE can’t invoke privateFunc directly. Returned object members can be invoked using dot notation as below:

var someVar = module.publicVar;
module.publicFunc();

The IIFE above returns an anonymous object. There are other ways to achieve the same functionality. The one below is called named local object literal.

var module = (function() {
   var privateFunc = function() {
      console.log("I'm private. Only my family knows what I do.");
   }

   var myObj = {};
   myObj.publicVar = "Good things are available to good people.";
   myObj.publicFunc = function() {
      privateFunc();
      console.log("Keep focused and learn to create public functions");
   }
   return myObj;
}());

We have first created an empty object myObj and then added property publicVar and method publicFunc later. Finally, we return the named object myObj. This is useful when you have large amount of code in your module and you want to see clearly what are the public members without having to see the return statement.

A small variation of this pattern is shown below where we put all the public members to the object while defining the named object itself. Finally, object is returned as usual.

var module = (function() {
   var myObj = {
      publicVar: "Good things are available to good people.",
      publicFunc: function() {
         console.log("Keep focused and learn to create public functions");
      }
   };
   return myObj;
}());

What we have seen so far is known as Module Pattern. There is one improved version of it and is called Revealing Module Pattern. Let’s see that next.

Revealing Module Pattern

The revealing module pattern lets you define your variables and functions in conventional JavaScript way and gives you the provision to specify the public members at last. Basically, we define all our properties and methods with private module level scope and return an anonymous object with properties as pointers to the private members. See the illustration below:

var revealingModule = (function() {
   var privateVar = "Keep me private";
   var publicVar = "Return me as public";

   function privateFunc() {
      console.log("A private function");
   }

   function publicFunc1() {
      console.log("First public function");
   }

   function publicFunc2() {
      console.log("Second public function");
   }

   return {
      publicProperty: publicVar,
      firstPublicMethod: publicFunc1,
      secondPublicMethod: publicFunc2
   };
}());

This is a very neat way of specifying the public members you want to expose to the outside world. The main advantage of this pattern is code readability. You can very easily figure out the variables and functions that are exposed publicly in the return statement. You can name the properties and methods of object being returned as per your choice.

Module and Revealing Module patterns are very useful when we want to manage scope in JavaScript. Let’s understand this with one more example.

var rectangle = (function() { 
   function getArea(length, breadth) {
      return length*breadth;
   }
 
   function getPerimeter(length, breadth) {
      return 2*(length + breadth);
   }
 
   return {
      GetArea: getArea,
      GetPerimeter: getPerimeter
   };
}());

We are creating a module rectangle that has two private methods getArea and getPerimeter. Both the methods are good to be self explanatory. We are returning an object with two properties, GetArea and GetPerimeter that contain functions getArea and getPerimeter respectively. A property that contains a function is called method. We can invoke methods GetArea and GetPerimeter using variable rectangle as below.

var area = rectangle.GetArea(2, 3); // area = 6
var perimeter = rectangle.GetPerimeter(2, 3); // perimeter = 10

Use Revealing Module Pattern to provide abstraction over the private implementations. This is like exposing public APIs to the outside world while keeping implementation details private.

Did you like the post? Speak to me loud by leaving your comments, questions or suggestions in the comment box. Thanks for reading.

Love JavaScript and want to explore the language more? Checkout my blog at www.code-morning.com