Understanding Prototype Pattern in JavaScript

I am writing this article from Bulgaria Sofia. I am here to attend the Devreach conference organised by Telerik. In the 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 sessions I have attended so far. He explained such a complex topic in the easiest manner to the gathering of more than 150 people in the room. I was one of them and I learned many things.

You can watch his course on the same topic "Structuring JavaScript Code" on the PluralSight here.

In this article I am trying to explain my understanding of the Prototype Pattern in JavaScript after Dan's session. I hope you will like this.

So, let us start with 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:

1. It is hard to maintain when functionality grows

2. It is hard to debug

3. It is hard to test

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

Let us try to satisfy the requirements above using the Prototype Pattern. We will write the code above adhering to the 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 a couple of advantages of the code following the Prototype pattern over code we wrote in the first example as in the following:

1. Code is reusable

2. Functions can be overriden using prototyping

3. There is no variable or function in the global namespace

The biggest example is functions that are loaded into memory only once. Now again return to one of the biggest problems in the above example was overriding. We need to modify the existing code to override or alter any functionality. In the Prototype Pattern if you want to modify or override any function then you can do that easily either in the same script file or a separate script file as below.

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

So as we see it is very easy in the Prototype Pattern to override any function and avoid global declaration of variables and functions. Implementing a Prototype Pattern is also easy.

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