You are currently viewing Object Oriented Programming Concept in JavaScript

Object Oriented Programming Concept in JavaScript

oops
Object Oriented Programming

OOP, or Object Oriented Programming, is a programming model based on the concepts of Objects. In OOP, objects and classes organize code to describe methods and properties. The main goal of OOP is to organize the structure of the code. Real-world entities can easily be associated with the code.

Features of Object Oriented Programming

These are the some main feature of OOP in JavaScript:

  • Object
  • Classes
  • Encapsulation
  • Inheritance
  • Abstraction
  • Polymorphism

Now one by one we will take look into all of these above mentioned features.

Object

The object is an instance of a class. The object contains properties and methods. The characteristics of an object are called Properties and the actions are called methods in Object Oriented Programming.

For example, consider a car as an object.
The car has so many characteristics like color, modal, name, price, etc. These characteristics are properties. And also, we can perform actions like start, break, and stop and these actions are methods.

Example

let Name = {
fname: "Hello",
lname: "World"
}
console.log(Name.fname);
console.log(Name.lname);

//Output:
//Hello
//World

Classes

Class is a blueprint of an object. Class is a collection of objects of similar types. Classes are a special type of function. Like function declarations, we can define classes. Classes contain various methods and constructor. A class can have many Objects because the class is a more like template while Objects are the instance of the class.

We can say an object is the variable and class is a data type[user-defined data type]. Every Object is associated with the class.

Example

// Defining class using es6

class Student {
  constructor(name, marks, rollnum) {
    this.name = name;
    this.marks =  marks;
    this.rollnum = rollnum;
  }
  getDetails(){
      return (`The name of the student is ${this.name}.`)
  }
}

// Creating Object with the help of the constructor
let s1 = new Student('Aabhi', 40, 12);
let s2 = new Student('Nisha', 90, 15);
 
console.log(s1.name);    // Aabhi
console.log(s2.marks);   // 90
console.log(s1.getDetails());
Output

Encapsulation

Encapsulation is the process of wrapping up data into a single unit. This data can be properties and methods.

The best example of Encapsulation is Objects. Objects contain properties and methods inside them.

It is also referred to as Data Abstraction because the unnecessary information is hiding from the user and only the necessary information is shown.

Example

//Encapsulation example
class Studentdetail{
    constructor(name,id){
        this.name = name;
        this.id = id;
    }
    add_marks(marks){
        this.marks = marks;
    }
    getDetails(){
        console.log(`Name is ${this.name},Marks is: ${this.marks}`);
    }
}

//Object1
let s1 = new Studentdetail('abc',1);
s1.add_marks(90);
s1.getDetails();

//Object2
let s2 = new Studentdetail('xyz',2);
s2.add_marks(50);
s2.getDetails();

In the above program, the properties and methods are wrapped in a single unit such that within the class. So, this above program demonstrates the concept of Encapsulation.

Inheritance

Unlike most of the OOPS languages like C++, and Java where classes inherit classes In JavaScript Objects inherit Objects. It means certain properties and methods of one Object are being used by another object. So this feature of JavaScript is known as Inheritance. The main advantage of inheritance is reusability

To create inheritance class, we use the extends keyword.

// People class - Base class
class People { 
    constructor(name) {
        this.name = name;
    }
    fun() {
        console.log(`Hello ${this.name}`);
    }
}

// inheriting parent class - Derive Class
class person1 extends People {
    //Derive class body

}

let p1 = new person1('xyz');
p1.fun();

Polymorphism

Poly means “MANY”.

morph means “FORM”.

Polymorphism means more than one form . We may have many functions with the same name in our program. Like + operator is used to add two numbers at the same time when it is used with string it concatenate them. So this operator is an example of Polymorphism.

Below is an example which shows right working of polymorphism.


//Polymorphism Example

	class BaseClass {
		fun() {
			console.log("Function inside Base Class");
		}
	}
	class childClass extends BaseClass {
		fun() {
			console.log("Function inside child class");
		}
	}

	var o1 = new BaseClass();
	var o2 = new childClass();
	
	o1.fun();// Function inside Base Class
	o2.fun();// Function inside Child Class

Here, function fun() is present in Base Class as well as in Child Class. But this function performing different different action.

Abstraction

Abstraction is defined as showing only the important things to the user and hiding the inner implementation of our program from the user.

“we can not create objects or instances of an Abstract class in Abstraction.” If we will create the object of Abstract class the code will throw Error.

Abstract Class

Abstract Class is a class which contain at-least one Abstract method inside it.

Abstract Method

Abstract Method is a method which is declared inside the Abstract class and contain its implementation inside its subclasses.

Example


//Abstraction Example
// constructor function
 function Car()
{
    this.carName="carName";
    throw new Error("Instance of Abstract Class can not be created");
}
//If we will create the object of the Abstract class it will return error.
Car.prototype.show=function()
{
    return "Car is: "+this.carName;
}


//Creating a constructor function
function car1(carName)
{
    this.carName=carName;
}


//Creating object 
car1.prototype=Object.create(Car.prototype);
var c=new car1("BMW");
console.log(c.show());

That’s it. We have covered all the concepts of Object Oriented Programming Concept with JavaScript.

!!Object Oriented Programming !!

Article written By: : Ankita Kataria.

Check this also Functions in JavaScript.

Thank you !!

This Post Has One Comment

Leave a Reply