Learn Object Oriented Programming Concepts in JavaScript

If you are a JavaScript lover then you must have always missed the Object Oriented programming concepts in JavaScript. You must have dreamt of classes, properties, objects in JavaScript. But let me tell you that your dreams will come true after reading this article. Object Oriented programming is possible in JavaScript and this is done with help of ‘prototype’. Now lets come to point and see how it is done.

Creating the Class:
In JavaScript, a class is nothing else than a simple function. It has same definition and declaration style as that of a function. Look at the following example:

function myClass(){  //myClass is the name of the JS class
 //Extra code lies here...
}

Now let us create some properties for our class.

function myClass(){
 this.a = 20;
 this.b = 'webspeaks';
 this.c = new Array();
}

Adding variables from outside the class:

myClass.prototype.newVariable = 'Wow! It works...';

Now let us add some methods to our class.
Adding methods to our class is very interesting. You need to create new methods through ‘prototype’ keyword along with the class name. All the properties of the class are available in this function through the use of ‘this’ keyword.

myClass.prototype.myMethod = function (){
 document.writeln('Following are the properties of myClass:');
 document.writeln(this.a+', '+this.b); //'this' points to myClass
 this.c['first'] = 'Red';    //Assign values to properties of the class
 this.c['second'] = 'Blue';
 document.writeln(this.c['first']+', '+this.c['second']);
 document.writeln(this.newVariable);     //Access the class variable created outside the class
}

Call the method from the class:

function myClass(params){
 this.myMethod(); //Call the method using 'this'
}

Creating object of the class:
Now you may want to know how do I access the class through the code. Don’t worry, here is the solution:

//Creating Object 
var obj = new myClass();

//Call the methods and properties of the class through the newly created object
document.writeln(obj.a + ' = a');
document.writeln(obj.c['first'] + ' = c[first]');
obj.myMethod();     //Call the method of class through object

Parametrized Classes:
We can also create classes in JS that accept parameters. Just take a look at following example:

function myParamClass(params){ //We pass an array to the class as parameter
 this.p = params     //Hold the parameters in a class variable for access throughout the class methods.
 this.x = this.p['name'];  //Same as this.x = params['name'];
 this.y = this.p['age'];   //Same as this.x = params['age'];
}

//Passing parameters to our class
var values = new Array();
values['name'] = 'Arvind';
values['age'] = '23';
//Creating Parameterized Object 
var obj = new myParamClass(values);

//Access the class variables
document.writeln(obj.x + ' = name'); //Prints 'Arvind'
document.writeln(obj.y + ' = age');  //Prints '23'

And that’s all for now. I hope you enjoyed the article. Please share the article if you find it interesting:)