Design Patterns in JavaScript

What is design pattern?

In software development, important aspect of code is, it should be easy to understand, maintainable, reliable and the most important it should be scalable because it is bad practice to write the code again when there is a change in requirement.
So design patter is the object-oriented solution of commonly occurring software problems. By using the design pattern we can write the code in a structured way, so that code would be scalable according to change in the requirements.

JavaScript design patters-

1) Constructor pattern – As we know JavaScript doesn’t support the concept of classes but it supports the concept of object and in JavaScript constructor used to initialize an object.
Ex-

     var Dog = function(name,color){
  	            this.legs=4;
  		    this.name=name;
  		    this.color=color;
                    this.Dogname=function(){  //Method 
    			              console.log('Dog name is='+this.name);
  		                 }
               }
               var ObjDog= new Dog('Shaggie','Black');
               ObjDog.legs;
               ObjDog. Dogname();

Interesting aspect of constructor pattern is that the variables act as global variable, and we just need to change the one variable when there is change in requirement. Like in the above example if we change the this.legs=2; then this change will reflect in the whole code wherever it has been using. Body of method in the constructor pattern is known as the default settings.

Drawbacks- Drawback of the constructor pattern is when we create one object of Dog() then the method Dogname() inside the Dog() will copied in the object. Similarly when we create 100 objects of Dog() then the Dogname() will copied in all the 100 objects, so this leads to redundancy. To overcome this drawback Prototype pattern is used.

Prototype design pattern-

Prototype pattern can be divided into two parts, first part is constructor section and second part is prototype section. Prototype allows data and method to be associate with the objects besides this only one copy of data and the method exists across all objects, this result less memory consumption.
Ex-

     var DogProto = function(){  
                    }

DogProto() is a function with no data and method inside it, when we will add data and method that will be shared by all the objects of Dogproto();
Define data in the above empty method using prototype-

     DogProto.prototype.name='No name'; //default
     DogProto.prototype.Dogname=function(){ //default function
          console.log(this.name);
     } 

     var ObjDogProto=new DogProto();//created object
     ObjDogProto.name='Shaiggie';//attach data in the object
     console.log(ObjDogProto.name);//access that data
     ObjDogProto.Dogname();//access the method

Now this prototype pattern also having some disadvantages, in prototype pattern first we have to create an empty method and then attach the data and methods into the empty method.
And while creating objects we have to attach data and method one by one results a time consuming process.
So to overcome these disadvantages Dynamic Prototype Pattern is the solution.

Dynamic prototype pattern-

In dynamic prototype pattern we create a method with default settings and then attach the data and method according to the need.
Ex-

     var DogProto = function(name,color){ //method with default settings  
  	                 this.name=name;
  	                 this.color=color;
                    }

     DogProto.prototype.Dogname=function(){ //attached method
          Console.log(this.name);
     } 
     var ObjDogProto=new DogProto('shaiggie','black');//created object
     ObjDogProto.Dogname(); //access the method
     var ObjDogProto1=new DogProto();//created another object
     ObjDogProto1.Dogname('jack');//access method eith newly created object

Fiddle for constructor pattern https://jsfiddle.net/shivmourya/j8fe25f1/
Fiddle for prototype pattern https://jsfiddle.net/shivmourya/yuL334df/
Fiddle for Dynamic Prototype pattern https://jsfiddle.net/shivmourya/b8uj3grb/

Leave a comment