Click here to Skip to main content
13,860,894 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

20.3K views
8 bookmarked
Posted 20 Sep 2014
Licenced CPOL

Javascript design patterns and IIFE

, 20 Sep 2014
Rate this:
Please Sign up or sign in to vote.
This article will explain a JavaScript design pattern called the Revealing Module Pattern.

Introduction

Hello Everyone, In this article I'll be explaining one of the popular design patterns being used in JavaScript named "Revealing Module Pattern". As it is a JavaScript design pattern, the only pre-requisite is basic knowledge of JavaScript. Along the way, I'll also explain some basic JavaScript constructs which will help us write JavaScript in an Object Oriented approach. I'll also be explaing another concept called IIFE (Immediately Invoked Function Expression).

Lets get started

Here we are talking about design patterns and obviously Object Oriented Programming comes into the picture when we talk about design patterns. So you must be thinking we have to write a class, create objects, encapsulate/abstract members etc. But in Javascript we can't create a class like we do in other Object Oriented Programming languages C++/C# etc. However don't worry, we'll see later how to simulate classes in JavaScript. Lets get some JavaScript concepts cleared before we go further into creating classes.

Objects

In JavaScript, everything is an object with the exception of number, string, boolean, null and undefined. JavaScript objects are similar to dictionaries with key/value pairs. 

Object literal notation

The object literal notation is used to denote objects in JavaScript. 

E.g. Here we define an employee object named employeeObj with 3 properties firstName, lastName and age.

var employeeObj = {
 firstName : "Robert",                                                                             lastName : "Bosch",
 age : 31
};

We can also create objects by creating an instance of the Object type. We can also start adding properties in the object directly.

var obj = new Object();
obj.firstName = "John"; 
obj.lastName = "Bosch";

Functions and Scope

If we define a variable which is not inside any function, then that variable would be called a global variable. And defining a variable within a function would be local to that function and so the scope of the local variable would be within the function. 

In the example below "a" is a global variable and so it is accessible within the function AddMe and from outside too. "b" again is a local variable to the functionAddMe so won't be accessible outside of the functionAddMe. This is a very important concept which leads us to another concept called closure which we explain below.

// global variable
var a = 27;                                                                                                                                                                                         // define a function with a parameter valueToAdd
function AddMe(valueToAdd){
  var b = 100;
  return a + b + valueToAdd;
}                                                                                                                                                                                                   document.writeln(AddMe(50));                                                

Closure

JavaScript allows writing nested functions i.e. function within a function and so on. And the inner functions can access variables defined outside the inner function and this concept is called a Closure. Closure is a computer programming term and for those interested to know more about it, you can read it here. 

http://en.wikipedia.org/wiki/Closure_(computer_programming)

So in the example below, the addinner function using the variables a and b defined outside it creates a closure so that those variables stay beyond there scope. What is important here to notice is that a call to addouter() function returns a variable which we call later but still the values of the variables "a" and "b" are hanging around. Think about it this way, the variable result is nothing but the function addinner. Now in the last line, we did invoke the result() function which means we invoked the addinner function which was able to return the values of "a" and "b" variables and its because of the closure in which its enclosed. 

The concept of closure is a bit difficult to understand if you are reading about it the first time. Let me give you another reference to understand closure better.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

// Global variable "a"
var a = 10;                                                                                                                                                                                         // Outer function addouter
var addouter = function(){
  var b = 20;
  
  // Inner function addinner
  var addinner = function(){
    return (a + b);
  }
  return addinner;
}                                                                                                                                                                                                   // Call outer function which returns addinner as a variable.
var result = addouter();
// As result variable contains variable addinner which is nothing but a function
// so we have to call result() as a function.
document.writeln(result());                                                                                            

Revealing Module Pattern

So now we'll use the concepts explained earlier to write a design pattern which is called Revealing Module Pattern.

In the example below, we define an outer function named "Mathlibrary" which will simulate a class in an Object Oriented language. Inside this class Mathlibrary, we'll have certain local variables like count, _add and _sub.

count is a local variable which is used as a counter.

_add and _sub variables are functions but as these are local variables so we can treat them as private methods.

So the variables count, _add and _sub would not be accessible from outside the function Mathlibrary so that means we have encapsulated them inside the class Mathlibrary.

Now what does the Mathlibrary function(representation of a class) return?

As we can see it returns a JavaScript object in the form of an object literal.

And what does the returned object contain?

It contains 2 properties "add" and "sub". "add" points to nothing other than the _add variable which is a function to add 2 numbers and also display a counter. Similarly "sub" points to _sub variable which is a function to subtract 2 numbers and display a counter. 

After we defined the function(class) Mathlibrary, we created an instance of it named "mathObj" and later called the 2 public methods add() and sub().

So in essence, we created a class with 1 private variable, 2 private methods and 2 public methods. This particular pattern is called the "Revealing Module Pattern".

var Mathlibrary = function(){
  // private count variable
  var count = 0;
  
  // private method _add
  var _add = function(a, b){
    count++;
    document.writeln(a + b + "- count = " + count);
  };
  
  // private method _sub
  var _sub = function(a, b){
    count++;
    document.writeln(a - b + "- count = " + count);
  }
  
  // return public method add and sub as a JavaScript 
  // Object literal
  return{
    add : _add,
    sub : _sub
  }
}
// Create an object of Mathlibrary class
var mathObj = new Mathlibrary();
// Call methods add and sub on the mathObj object
mathObj.add(150, 100);
mathObj.sub(150, 100);

Singleton

With the above pattern, we simulated creating a normal class where every time, we new up an object an instance got created. In the below sample, I'll modify the code slightly to create a singleton so that there will be a single instance of the object in memory.

The change done is actually very simple. We have just added a parenthesis() with a semicolon to the function definition of Mathlibrary which will self execute. And as its self executing, so we don't have to new it up and call the methods on it.

var Mathlibrary = function(){
  // private count variable
  var count = 0;
  
  // private method _add
  var _add = function(a, b){
    count++;
    document.writeln(a + b + "- count = " + count);
  };
  
  // private method _sub
  var _sub = function(a, b){
    count++;
    document.writeln(a - b + "- count = " + count);
  }
  
  // return public method add and sub as a JavaScript 
  // Object literal
  return{
    add : _add,
    sub : _sub
  }
}();

// As its a singleton, we don't need to create an object but can directly call the methods.
Mathlibrary.add(150,100);
Mathlibrary.sub(150,100);

IIFE (Immediately Invoked Function Expression)

We already read about global variables and if we have a look at the above 2 programs that we wrote, we will see that we created a couple of global variables, one for creating the class Mathlibrary and one for creating the instance of the class mathObj. And let me tell you something that you already know, global variables are bad. Yes in JavaScript its even worse. Have a read http://www.oreillynet.com/pub/a/javascript/excerpts/javascript-good-parts/awful-parts.html

So to avoid global variables, we'll create an IIFE, where we'll wrap the entire code of the Revealing Module Pattern in an anonymous function(a function with no name) and add parenthesis at the end to self execute it(similar to the singleton pattern). And thats it, we have a design pattern with encapsulated members and no global variables.

(function(){                                                                                      var Mathlibrary = function(){                                                                         // private count variable
  var count = 0;
  
  // private method _add
  var _add = function(a, b){
    count++;
    document.writeln(a + b + "- count = " + count);
  };                                                                                                                                                                                                  // private method _sub
  var _sub = function(a, b){
    count++;
    document.writeln(a - b + "- count = " + count);
  }                                                                                                                                                                                                   // return public method add and sub as a JavaScript 
  // Object literal
  return{
    add : _add,
    sub : _sub
  }                                                                                               }
// Create an object of Mathlibrary class
var mathObj = new Mathlibrary();
// Call methods add and sub on the mathObj object
mathObj.add(150, 100);
mathObj.sub(150, 100);
}());                                                                                                                                                                                                      

Summary

So in this article, we learned one of the very popular design patterns used in JavaScript the "Revealing Module Pattern". 

If you have any questions, please post it and I'll try my best to answer those. Hope it helps.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rajiv Gogoi
Technical Lead Wipro Technologies
India India
Currently working with Wipro Technologies as a Technical Consultant. I am primarily a .NET developer/consultant with experience in ASP.NET, ASP.NET MVC 3/4/5, WCF, Windows Azure,Knockout, AngularJS, NodeJS etc. I am interested in keeping myself updated with emerging technologies.

You may also be interested in...

Comments and Discussions

 
QuestionMessage Closed Pin
30-Nov-16 0:57
professionalMayank_Gupta_30-Nov-16 0:57 
QuestionUnnecessarily long but still gold Pin
IntelliSense125-Jan-16 5:07
memberIntelliSense125-Jan-16 5:07 
QuestionNice article! Pin
George Tourtsinakis21-Jan-16 2:46
memberGeorge Tourtsinakis21-Jan-16 2:46 
GeneralMy vote of 2 Pin
tornbladswe23-Sep-14 3:59
membertornbladswe23-Sep-14 3:59 
BugIncorrect Singleton Pin
Nitij23-Sep-14 1:04
professionalNitij23-Sep-14 1:04 
GeneralRe: Incorrect Singleton Pin
Rajiv Gogoi23-Sep-14 3:42
professionalRajiv Gogoi23-Sep-14 3:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 21 Sep 2014
Article Copyright 2014 by Rajiv Gogoi
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid