Oops concept in JavaScript

This tutorial will help you understand how to use oops concept in javascript. Actually javascript is not a oops supported language directly. But still we can use oops in javascript.

As javascript doesnot support direct oops, we dont have class keyword in javascript to define a class. So how do we define a class in javascript ? It simple as given below

// Defining a class animal--> 							
function animal(){};

so this function animal is actually a class. We have one more method to define the class as follows

// Defining a class animal in another way--> 							
var animal = function(){};

But we are going to use our first method of defining the class in this tutorial. Ok, so now you know to define a class, lets learn how to define member variables and member functions inside our class. I actually need three member varibles name, age and sex and I also need two member functions namely sayName() and sayAboutYou() . Let see how

// Defining meber variables & functions in animal class-->
function animal(){
	this.name = 'Animals name'; // Member variable
	this.sex  = 'Animals sex';
	this.age  = 'Animals age';
	this.sayName = function(){ // Member function
			console.log('My name is '+  this.name);
	};
	this.sayAboutYou = function(){
			console.log('My name is '+  this.name + ','+ ' My sex is '+ this.sex + 'and my age is '+ this.age);
	};
};

So this way we can define member variables and member functions in our class. Ok! now lets see how to create a instance of our class animal and execute its member functions, note that we use ’new‘ keyword to create instance of our class as we do in other languages

// Creating instance of class-->
var animalInstance = new animal();

// Instance create and stord in a variable animalInstance
// Now lets get the member variables from instance
console.log(animalInstance.name);  // Output : Animals name
console.log(animalInstance.sex);  // Output : Animals sex
console.log(animalInstance.age);  // Output : Animals age
animalInstance.sayName(); // Output : My name is Animals name
animalInstance.sayAboutYou(); // Output : My name is Animals name, My sex is Animals sexand my age is Animals age

We have one more method to assign this member variables and member function to a class (which I prefer). With that method we can declare our member varibles and member function outside the class. For this we use prototypes.

// Defining meber variables & functions in animal class-->
function animal(){};
animal.prototype.constructor = animal; 	// Defining constuctor
animal.prototype.name = 'Animals name'; // Member variable
animal.prototype.sex  = 'Animals sex';
animal.prototype.age  = 'Animals age';
animal.prototype.sayName = function(){ // Member function
		console.log('My name is '+  this.name);
};
animal.prototype.sayAboutYou = function(){
		console.log('My name is '+  this.name + ','+ ' My sex is '+ this.sex + 'and my age is '+ this.age);
};

This way we can define member variables and functions outside the class that will make your coding very neet and clean.

So lets come to the concept of constructor. We do have built in constructor in the calss. So what is constructor ? It is something which is executed every time the class in initialised, right? So
our constuctor codes are written inside the function declaration as shown below.

// constructor of animal class-->
function animal(){
	// This is the constructor
	console.log('Hi! The constructor function is initialised');
};

So altogether we have the below lines of code

// Class animal-->
function animal(){
	// This is the constructor
	console.log('Hi! The constructor function is initialised');
};
// Defining member functions and variables and assigning constructor to the class
animal.prototype.constructor = animal; 	// Defining constuctor
animal.prototype.name = 'Animals name'; // Member variable
animal.prototype.sex  = 'Animals sex';
animal.prototype.age  = 'Animals age';
animal.prototype.sayName = function(){ // Member function
		console.log('My name is '+  this.name);
};
animal.prototype.sayAboutYou = function(){
		console.log('My name is '+  this.name + ','+ ' My sex is '+ this.sex + ' and my age is '+ this.age);
};


// Creating instance of the class
var animalInstance = new animal();

//And now using the created instance
console.log(animalInstance.name); 
console.log(animalInstance.sex);  
console.log(animalInstance.age);
animalInstance.sayName(); 
animalInstance.sayAboutYou(); 


//So the output will be as follows

//Hi! The constructor function is initialised
//Animals name
//Animals sex
//Animals age
//My name is Animals name
//My name is Animals name, My sex is Animals sexand my age is Animals age

Wow! So that is almost done. We have created a javascript class and even accessed there member variables , executed member functions by creating the instance of the class. Great 🙂

So , why shouldn’t we think of passing parameters in class now. Ya lets go. Now I want to modify my animal class as it accepts three parameters namely name, age and sex , So that I can make my member variables name, age and sex dynamic.

To make member variables accept the parameter values I am going to write the member variables inside the function itself because till now I havent find a method to access those parameters outside the function. I guess we cant do that.[ But I am not sure! ]. So now our code will be as follows

// Class animal-->
function animal(name, sex, age){ // Now my class can accepts three parameters
	// This is the constructor
	console.log('Hi! I am re writing my class in a way it can accept parameters');
	this.name  	= name; // Parameters are assigned to the member variables
	this.sex  	= sex;
	this.age 	= age;
};
// Defining member functions and variables and assigning constructor to the class
animal.prototype.constructor = animal; 	// Defining constuctor
animal.prototype.sayName = function(){ // Member function
		console.log('My name is '+  this.name);
};
animal.prototype.sayAboutYou = function(){
		console.log('My name is '+  this.name + ','+ ' My sex is '+ this.sex + ' and my age is '+ this.age);
};


// Creating instance of the class
var animalInstance = new animal('Tom','male',3);

//And now using the created instance
console.log(animalInstance.name); 
console.log(animalInstance.sex);  
console.log(animalInstance.age);
animalInstance.sayName(); 
animalInstance.sayAboutYou(); 


//So the output will be as follows

//Hi! I am re writing my class in a way it can accept parameters
//Tom
//male
//3
//My name is Tom
//My name is Tom, My sex is male and my age is 3

So we did it. Now we can send parameters and make the member variables dynamic! Awesome isn’t it?

So I think this is enough for now. But it dont ends here we are going to see how to achieve inheritance in javascript oops in my next post!