Dhananjay Kumar

I am writing this blog post from Bulgaria Sofia. I am here to attend Devreach conference organised by Telerik . In conference I had an opportunity to meet my great inspiration Dan Wahlin . I attended his session on “Patterns in JavaScript” and I must say it was one of the best technical session I have attended so far. He explained such a complex topic in the easiest manner to gathering of more than 150 people in the room. I was one of them and I had good learning.

You can watch his course on same topic “Structuring JavaScript Code” on PluralSight here

In this post I am trying to explain my understanding on Prototype Pattern in JavaScript after Dan session. I hope you will like this.

So, Let us start with a simple code to calculate and print salary. Usually we write code as given below to calculate and print salary

var basicSalary;
 var salary;
 function CalculateSalaray(basicSalary) {
 salary = basicSalary * 10;
 }
 function PrintSalaray() {
 alert("Salary is " + salary);
 }

CalculateSalaray(200);
 PrintSalaray();

Everything is good about this code but,

• It is hard to maintain when functionality grows
• It is hard to debug
• It is hard to test

Entire code is at the same place so if later a modification is required that has to be done in code itself. Let us consider an example that formula to calculate salary has been changed then that change has to be incorporated in the code. Alter or override of any function has to be done in existing code and that can lead to many unexpected bug in application. As a developer you need to modify CalculateSalary() function in the existing code and that may break many other things.

Let us try to achieve above requirement using Prototype Pattern. We will write above code adhering to Prototype Pattern.

var Salary = function(basicSalary)
 {
 this.basicSalary = basicSalary;
 var salary;
 };

Salary.prototype =
 {
 calculateSalaray: function () {
 this.salary = this.basicSalary * 10;
 },
 printSalaray: function () {
 alert(this.salary)
 }

};



var sal1 = new Salary(100);
 var sal2 = new Salary(200);
 sal1.calculateSalaray();
 sal1.printSalaray();
 sal2.calculateSalaray();
 sal2.printSalaray();

There are couple of advantage of code following Prototype pattern over code we written in first example,

• Code is reusable
• Functions can be override through prototyping
• There is no variable or functions in global namespace

Biggest example is functions are loaded into memory only once. Now again go back to one of the biggest problem in above example was overriding. We had to modify existing code to override or alter any functionality. In Prototype pattern if you want to modify or override any function you can do that easily either in same script file or separate script file as below,

Salary.prototype.calculateSalaray = function () {
 this.salary = this.basicSalary * 100;
 }

So as we see it is very easy in Prototype pattern to override any function and avoid global declaration of variable and function. Implementing Prototype pattern is also easy.

I hope now you have basic understanding of Prototype pattern in JavaScript. Thanks for reading and once again thanks to Dan Wahlin .