JavaScript – OOP Introduction

JavaScript object oriented programming concept is introduced first time in ES6 version. OOP concept in JavaScript is a programming methodology or paradigm which splits a large code into smaller parts called modules.

Using OOP feature in JavaScript, we find various advantage with our programming. Some are listed below.

• Code becomes more modular and hence it becomes reusable.
• It becomes more organized code.
• Due to modular coding, it becomes very easy to debug and maintain.
• Generally used for complex and large website projects.

In order to understand OOP concept, we should be well aware of Class and Object.

Class:- A class is a template which determine how an objects will behave and what the objects will contain. A class is a blueprints for making instances of the same kind (or class) of object.

Let us understand with the help of some examples:

Example 1 – Suppose there is a builder and he has a map and using that map, he wants to builds flats. Here, map is a blueprints (class) and with the help of that map (class) he will create many flats (objects).

Example 2 – Suppose there is a car manufacturing company. A car manufacturing company will have a common or basic template to manufacture different different cars.

Here basic template means, all features and details that should be in a car.
– Color
– Engine
– Seats
– AC
– Price

These are the basic things available in each cars. So, with the help of this template, manufacturing company can decide and make several types of cars with different features and different values for the properties.

color, engine, seats, ac, price will be the properties of class car.

Let us understand how a class and methods are created. Also how the objects are created.

class introduction
{
    message()
    {
        console.log('Hello, Welcome to Advance JavaScript Tutorial.');
    }
}

let obj_intro = new introduction();
obj_intro.message();

#Output
Hello, Welcome to Advance JavaScript Tutorial.

Let’s have a look on another example:-

//Class declaration
class Student  
{  
    //Initializing an object  
    constructor(id, name)  
    {  
        this.id=id;  
        this.name=name;  
    }  

    //Method declaration
    detail()  
    {  
        document.writeln(this.id+" "+this.name+"<br>")  
    }  
}  

//Creating object and passing arguements required by the constructor
var student1 = new Student(1001,"Ashok Mehra");  
var student2 = new Student(1002,"Gaurav Pandey");  

//calling method  
student1.detail();
student2.detail();  

#Output
1001 Ashok Mehra
1002 Gaurav Pandey

A class can be declared once only. If we try to declare class more than one time, it throws an error.

In JavaScript OOP, there are three methods:

• Constructor
• Prototype
• Static

Constructor: This type of methods are automatically initialized whenever objects are created of class.

Syntax:

class Introduction
{
    constructor()
    {
        console.log('Welcome to Share Query');
    }
}

let intro = new Introduction();

#Output
Welcome to Share Query

Prototype: JavaScript is prototype based language. It is not initialized automatically. In prototype method, we write its name and call them explicitly.

class Introduction
{
    constructor()
    {
        console.log('Welcome to Share Query');
    }

    message()
    {
        console.log('Learn Advance JavaScript OOP Concept.');
    }
}

let intro = new Introduction();
intro.message();

#Output
Welcome to Share Query
Learn Advance JavaScript OOP Concept.

Static methods

In static method, we write first static keyword before of method name. This type of method is different from constructor and prototype methods. Constructor and prototype methods are called when an object is created of a class. But in case of static method, we need not to create object. We can use static method directly by class name followed by static method.

Let us understand with an example.

class Student  
{  
    constructor(name, age)  
    {
        this.student_name = name;
        this.student_age = age;
        console.log("Constructor Function Called.");
    }  

    greeting()  
    {  
        document.writeln(`Hello ${this.student_name}. Your age is ${this.student_age}.`);
    }  

    static static_method()
    {
        document.writeln('Static Function.');
    }
}  

let stud1 = new Student('Shivesh', 30); //Constructor Function Called.
stud1.greeting(); //Hello Shivesh. Your age is 30.
Student.static_method(); //Static Function.

Share on Facebook

Tweet

Follow us

Save