a blog for those who code

Friday 11 March 2016

4 JavaScript Design Patterns you Should be Aware Of

In this post we will be discussing about getting started with JavaScript Design Patterns. A design pattern is a reusable software solution to fix the problem which occurs frequently when developing software. This solution is been figured out by the experts after practicing software development over the years.
Since we are constantly writing more and more complex web apps we need to use some design patterns to reuse the code which will make it easier to maintain.

Design patterns are important because it will help you to create easily maintainable and highly decoupled code which is very important if you are creating large JavaScript applications. It also helps make communication between software designers more efficient as they can picture the high-level design in their head when they come to know about the design pattern thus making it relatively easier to start working on it.

The design patterns in JavaScript are :

1. Module Design Pattern
2. Singleton Design Pattern
3. Prototype Design Pattern
4. Observer Design Pattern
5. Constructor Design Pattern
6. Revealing Module Design Pattern
7. Mediater Design Pattern
8. Command Design Pattern
9. Decorator Design Pattern
10. Flyweight Design Pattern
11. Facade Design Pattern
12. Factory Design Pattern
13. Mixin Design Pattern

We will not be discussing each and every design patterns, in this post we will only discuss 4 most important design patterns and they are Module, Protoype, Observer and Singleton.

Module Design Pattern

It is a design pattern which is used to implement the concept of software modules. It helps in reducing the global scoped variables by just focusing on public and private access to methods and variables. It is by far the most common among all the design patterns out there.

The concept of module design pattern is to wrap all the code in a function literal (function which calls itself) and then assigned to a single variable when it returns. JavaScript modules helps in keeping the pieces of code independent of other components, which provides loose coupling to support well-structured code.


var myFunc = (function() {
   var data = 'mydata';
   return {
     changeData: function () {
       data = "changedData";

In the above example other parts of the code are unable to access our data variable bacause its existence is limited to within the module's closure. Thus to access the data we need to call the function with the name of the module.

Singleton Design Pattern

It is a design pattern which allows only single instantiation of an object thus reducing the memory usage. This comes in handy when you want to create a class whose functionality doesn't change for its multiple instances for example database connection pool.

The advantage of using Singleton is that it reduce memory footprint, it has single point of access and initialization can be delayed thus preventing instantiation until required.


var MyClass = (function() {
 var instance;

 function createInstance() {
  var myInstance = new Object();
  return myInstance;
 return {
  getInstance: function() {
   if(!instance) {
     instance = createInstance();
   return instance;

//Both Object1 and Object2 are equal as they are pointing to same instance
var object1 = MyClass.getInstance();
var object2 = MyClass.getInstance();

Prototype Design Patterns

It is a design pattern which specifies the kind of objects to create using a prototypical instance. It creates new objects by returning objects that are initialized with values rather than creating non-initialized objects. The objects created are clones of the original objects that are passed around.

The benefit of using prototype pattern is that we will be working with the prototypal strengths of JavaScript rather than attempting to get features of other languages. Implementing inheritance is very easy using this design pattern  which is actually a performance boost.


function Earth() {

Earth.prototype.live = function {
  //live in Earth

Person.prototype = Object.create(Earth.prototype);
var per1 = new Person ('Coding', 'Male')

In the above example we have seen how live (which is not a member of Person but it is a property of its prototype Earth) can be called using person's object. This happens because every object and every prototype has a prototype (i.e succession of objects linked together to form a prototype chain).

Read Also : Understanding JavaScript Prototypes

Observer Design Pattern

It is a design pattern which defines one-to-many dependency between objects thus when one object changes state, all dependents of it are updated automatically. In this object maintains a list of objects depending on it and it broadcasts a notification to the observers whenever it changes.

The advantage of using it is that it pinpoints the dependencies thus you need not have to worry about all the changes which needs to be done whenever any change occurs. It is also helpful in decoupling objects which give us reusable components.

Example :

var MyNotifier = function() {
  return {
    initObserver: function() {
      this.myObservers = [];
    addObserver: function(myObserver) {
    notifyObserver : function(myObserver) {
      var index = this.observers.indexOf(myObserver)

var MyObserver = function() {
  return {
    notify: function(index) {
      console.log("Observer Nottified of index " + index);

var myNotifier = new MyNotifier();

var myObserver1 = new MyObserver();
var myObserver2 = new MyObserver();
var myObserver3 = new MyObserver();
var myObserver4 = new MyObserver();



myNotifier.notifyObserver(myObserver3); // Observer notified of index 2

In the above example we have our MyNotifier and MyObserver class so whenever we do any change we can call the notify function of our MyObserver to notify the objects which are subscribed for notification. You can also notify all the observers depending on your application.

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

1 comment: