Design patterns in Javascript and how it is implemented

What is Design Patterns?
In simple words, design patterns are just a way of coding. There are several templates of coding and we name the group as design patterns and each pattern again have a specific name. There are 3 types of design patterns

Creational Design Pattern
Structural Design Pattern
Behavioural Design Pattern

In this blog, we will be discussing some of the Creational Design Patterns which are used in Javascript. And By Coding, we will try to understand them.

What is Creational Design Patterns?
This design pattern is all about class instantiation. This guides us different ways to instantiate the object.

Knowingly or unknowingly all of us use the design patterns. Below is the list of some of the Patterns which will be discussed in this blog.

Factory Method
Constructor Method
Prototype
Singleton
Builder

Factory Method:
Factory methods are much simple. They just create an object and return it. Look at the code below.

var Person = function(name, designation){

var _person = {};
_person.name = name;
_person.designation = designation;

_person.getInformation = function(){

console.log(“name is “, name);
console.log(“designation of ” + _person.name +” is “+ _person.designation);
}

return _person;

}

var person1 = new Person(“Akash”, “Software Developer”);
var person2 = new Person(“Kiran”, “Full Stack Developer”);

//how to get information of person1
person1.getInformation(); //in console you can see the result.
Factory methods just return created an object. What does person1 object and person2 object contain?

person1;
person1

person2;

person2

You compare both objects have received the object created by a Factory method. Both the Objects are not aware of what other object contains(no object really aware of). a getInformation method is common but both objects contain the copy of method of its own.

Constructor Pattern:
Constructor pattern/method does not create the object and return. When we create an object from constructor method it assigns values to a newly created object via this keyword.

var Person = function(name, designation){
this.name = name;
this.designation = designation;
this.getInformation = function(){
console.log(“name is “, name);
console.log(“designation of ” + this.name +” is “+ this.designation);
}
}

var person1 = new Person(“Akash”, “Software Developer”);
var person2 = new Person(“Kiran”, “Full Stack Developer”);

//how to get information of person1
person1.getInformation(); //in console you can see the result.

If you compare the person1 and person2 you will find the same result as a previous design pattern.

If I say, Constructor Pattern is Factory Pattern with different implementation may not be the wrong statement.

Prototype Pattern:
Prototypical pattern returns an initialized object. And the properties/methods which are set to prototypical chain actually passed as a reference in __proto property of a newly created object. here we win over redundancy.

https://www.youtube.com/watch?v=4NB3LT8BJok&t=15s

Let’s modify the code.

var Person = function(name, designation){
this.name = name;
this.designation = designation;
}
Person.prototype.getInformation = function(){
console.log(“name is “, name);
console.log(“designation of ” + this.name +” is “+ this.designation);
}
var person1 = new Person(“Akash”, “Software Developer”);
var person2 = new Person(“Kiran”, “Full Stack Developer”);

//how to get information of person1
person1.getInformation(); //in console you can see the result.
Lets us compare person1 and person2 object here.

Person1

Screen Shot 2017-12-08 at 3.34.01 AM

Person2

Screen Shot 2017-12-08 at 3.34.09 AM

You can compare both the object do not contain getInformation in the newly created object, You can still call them from person1 and person2.

How?

This method is inside the __proto property of both the object. You can watch the video if you want to explore more about Prototype.

Singleton Pattern:
Singleton design pattern means only one instance will be persisted throughout your application. Class initialization will be happening only for once.

Look at the code.

var Singleton = (function () {
var instance;

function createInstance() {
var object = new Object(“I am the instance”);
return object;
}

return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();

function run() {

var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();

alert(“Same instance? ” + (instance1 === instance2));
}//code taken from dofactory

If you have used factory/services in AngularJS i.e. Angular 1.x then you can easily relate this design pattern.
factory in angular js => Singleton + factory pattern
service in angular js => Singleton + constructor pattern

Builder Pattern:
Builder pattern allows the client to construct the object by passing some clue or key to class/constructor function/pure function.

Look at example below.

var Animal = function(){

this.createInstance = function(builder){
builder.print();
return builder.getObject();
}
}

var DogBuilder = function(){
this.dog = null;
this.print = function(){
console.log(“From Dog builder”);
this.dog = new Dog();
}

this.getObject = function(){
return this.dog;
}
}

var Dog = function(){
this.type = ‘Dog’;
}

var animal = new Animal(); // create the object representation
var dogBuilder = new DogBuilder(); // Builds how will be representation
var dog = animal.createInstance(dogBuilder) //object created

//Lets Practice one more builder for horse

var HorseBuilder = function(){ //<— Builder
this.horse = null;
this.print = function(){
alert(“From Horse Builder”);
this.horse = new Horse();
}

this.getObject = function(){
return this.horse;
}
}

var Horse = function(){ // Creater
this.type = ‘Horse’;
}

var horseBuilder = new HorseBuilder();
var horse = animal.createInstance(horseBuilder);

That’s all from Builder Design Pattern.

Conclusion:

These were some of the Design patterns, I wanted to discuss here.

Happy Design Pattern! Tata!

Looking for ReactJS Development Services? Hire our dedicated developers!