The most popular JavaScript design patterns in one chapter

In this tutorial we are going to learn about The popular JavaScript design patterns in one chapter, the main reason behind Design Patterns to explore OOJS complexity in very easy format.

Let's assume you have a class and want to create multiple instance such as:

popular javascript design patterns

As we know in JavaScript no formal support of Class so by using constructor function we can create Class, there are lots of flexible ways to create an Object. Let's lookup how can we do it:

Three Most Popular JavaScript Design Patterns:

1- Factory Pattern
2- Constructor Pattern
3- Prototype Pattern

Using above Design Patterns we can create a Class. As discussed JavaScript does not support Classes then we need to create Object and by using such Object we will create reusable functions.

Let's start:

1- JavaScript Factory Pattern:

Start using a variable function as below:

var employeeFactory = function(name, age, position) {

And we need to create an empty Object, for example, I'm creating:

var temp = {}

Or we can say:

var temp = new Object

Both are the exact same but I will prefer var temp = {} just because of short.

Let's see complete function first:

var employeeFactory = function(name, age, position) {
  var temp = {};
  temp.name = name;
  temp.age = age;
  temp.position = position;
  temp.printEmployee = function(){
   console.log(temp.name+", "+temp.age+", "+temp.position);
  }
  return temp;
}

Now this will behave like a 'factory' for example like whenever we have to create 2 new Employees:

var employee1 = employeeFactory("Siri",25, "DotNet Dev."); 
var employee2 = employeeFactory("Alexa",27, "Java Dev.");

And get Employee details using function printEmployee:

employee1.printEmployee();
employee2.printEmployee();

Siri, 25, Software Eng.

and

Alexa, 27, Java Dev.

So using this factory pattern we just created 2 employee details and see how reusable function will work.

Live example: https://jsfiddle.net/himstar/aj4mrf8e/2/

most popular JavaScript design patterns

2- JavaScript Constructor Pattern:

var employeeConstructor = function(name, age, position){
  this.name = name;
  this.age = age;
  this.position = position;
  this.printEmployee = function(){
       console.log(this.name+", "+this.age+", "+this.position);
   }
}

var employee1 = new employeeConstructor("Siri",25,"DotNet Dev.");
var employee1 = new employeeConstructor("Alexa",27,"Java Dev.");

employee1.printEmployee();
employee1.printEmployee();

Siri, 25, Software Eng.

and

Alexa, 27, Java Dev.

We are using 'this' keyword instead of 'temp' object and simply by using 'new' keyword here, I'm construction a function and the same output as 'factory'.

You can create thousands of employee properties using the single constructor function.

Live example: https://jsfiddle.net/himstar/gg2hzge3/5/

3- JavaScript Prototype Pattern:

This is the very different pattern in comparing the o previous pattern first, we are going to create an empty object:

var employeeProptoype = function(){

}

Now we are going to add 'Properties' and 'Function' into shared Object.

Every Object got a shared space called 'prototype'.

There is exactly two way to define:

1-

employeeProptoype.getSalary = function(){
   return this.salary;
}

"Or" in shared area using 'prototype', this message not directly attached to Employee but it can access Employee because of shared space.

2-

employeeProptoype.prototype.getSalary = function(){
   return this.salary;
}

Let's I'm creating default prototype for Employees:

employePrototype.proptotype.name = "No Name";
employePrototype.proptotype.age = 0;
employePrototype.proptotype.salary = 0;
employePrototype.prototype.printEmployee = function(){
   console.log(this.name+", "+this.age+", "+this.position)
}

Now we will get details for two employees 'Siri' and 'Alexa' as below:

var employee1 = new employePrototype();
employee1.name = "Siri";
employee1.age = 25;
employee1.position = "DotNet Dev.";
employee1.printEmployee();

And

var employee2 = new employePrototype();
employee2.name = "Alexa";
employee2.age = 27;
employee2.position = "Java Dev.";
employee2.printEmployee();

Again answer will be the as above patterns only way is different and mixes of the constructor function.

The interesting part is it's having a default value, for example, if you removed the name of employee1:

var employee1 = new employePrototype();
employee1.age = 25;
employee1.position = "DotNet Dev.";
employee1.printEmployee();

No Name, 25, DotNet Dev.

Means when we don't have property name it's using default property name, the same behavior will be for another property.

If we do:

console.log('name' in employee1);

It will return 'True' just because employee1 doesn't have their own property but can get the shadow of default property.
Simply by using prototype, it's looking default property of Object in case of no property.

Now run:

console.log('salary' in employee1);

The output will be 'false' because there is no default property for salary.

Live URL: https://jsfiddle.net/himstar/ydkst73o/21/

Without much of theory explanation I tried to clear major and practically much useful JavaScript design patterns with example, let me know for any suggestion or question.

Himanshu is a young engineer living in India. Currently working at Cognizant as a Senior Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page