Is JavaScript Object Oriented ? 2020

In this article we will understand various aspect of OOPs in JavaScript. we will get answer of Is JavaScript Object Oriented. We will understand Inheritance, Polymorphism, abstraction and Encapsulation and different ways to create object in JavaScript.

In Javascript, most of the things are objects like strings, arrays. Ultimately what is an object which encapsulates the properties here means variables and functions. The object ultimately acts as a container.

An object is a collection of related data and functionality.

Javascript is an object-oriented programming language. The object-oriented Programming language has 4 pillars

  1. Inheritance
  2. Polymorphism
  3. Abstraction
  4. Encapsulation

In Javascript object creation mainly classified into 2 broad categories

  1. In-built objects
  2. Custom Made Objects

In-built

These are standard objects which we generally use like Date object string etc.

Custom Made Object

These are objects which we created by our own need. In other languages, if you want to create an object we need a class but in javascript, we can create an object if we create a function and this function also called a constructor function.

In javascript, there are 2 ways to create custom objects by using constructor function and other is by using literal notation

function Student(firstName, lastName)
{

    this.FirstName=firstName;
    this.LastName=lastName;

    this.getFullName=function ()
    {       
        return this.FirstName+" - "+this.LastName;
    }
}



var s =new Student('x','y');

document.writeln(s.FirstName)
document.writeln("<br/>")

document.writeln(s.LastName)
document.writeln("<br/>")

document.writeln(s.getFullName())

Is JavaScript Object oriented
Is JavaScript Object oriented

This is a literal way to create an object in javascript

var student= {
FirstName:"Sagar",
LastName:"Jaybhay",
getFullName:function(){
    return this.FirstName+"-"+this.LastName;
}
}

document.writeln("<br/>");
document.writeln(student.FirstName)
document.writeln("<br/>")
document.writeln(student.LastName)
document.writeln("<br/>")
document.writeln(student.getFullName())
document.writeln("<br/>")

JavaScript Object Creation By Using Literal
JavaScript Object Creation By Using Literal

What is the difference between Constructor function object creation and Literal notation object creation in Javascript?

  • In constructor function properties and values are separated by equal (=) sign while in the literal function it is separated by a colon( : )
  • Constructor function every property ends with a semicolon(;) while in literal notation it ends with a comma(,)
  • In the literal function, you already created objects so only you need to write object name.properties syntax while in constructor function you need to create an object and need to access these properties.

Object

It is a unique entity that contains property and method. Suppose a person is having name Sagar Jaybhay is a real-life object person class that has characteristics like color, height, weight, etc.

let person = { 
    first_name:'Sagar', 
    last_name: 'Jaybhay', 
  
    //method 
    getFunction : function(){ 
        return (`The name of the person is  
          ${person.first_name} ${person.last_name}`) 
    }, 
    //object within object 
    phone_number : { 
        mobile:'12345', 
        landline:'6789'
    } 
}

Class

Class is a blueprint of an object. In ECMAScript 2015 the class is introduced and it is only sugar coating over an existing one.

Class In Javascript
Class In Javascript

class Vehicle { 
    constructor(name, maker, engine) { 
        this.name = name; 
        this.maker = maker; 
        this.engine = engine; 
    } 
    getDetails(){ 
        return (`The name of the bike is ${this.name}.`) 
    } 
    } 
    // Making object with the help of the constructor 
    let car = new Vehicle('Balleno', 'Maruti Suzuki', '1340cc'); 
    
    
    document.writeln(car.name); 
    document.writeln("<br/>");
    document.writeln(car.maker); 
    document.writeln("<br/>");
    document.writeln(car.getDetails()); 
    

Encapsulation

It is a process of wrapping data and function into one unit.

Encapsulation In JavaScript
Encapsulation In JavaScript

//encapsulation example 
class person{ 
    constructor(name,id){ 
        this.name = name; 
        this.id = id; 
    } 
    add_Address(add){ 
        this.add = add; 
    } 
    getDetails(){ 
        document.writeln(`Name is ${this.name},Address is: ${this.add}`); 
    } 
} 

let person1 = new person('Sagar Jaybhay',31); 
person1.add_Address('Pune'); 
person1.getDetails(); 

Inheritance

You can inherit properties from a parent class and use that is simple inheritance.

Inheritance In Javascript
Inheritance In Javascript

class person{ 
    constructor(name){ 
        this.name = name; 
    } 
    //method to return the string 
    toString(){ 
        return (`Name of person: ${this.name}`); 
    } 
} 
class student extends person{ 
    constructor(name,id){ 
        //super keyword to for calling above class constructor 
        super(name); 
        this.id = id; 
    } 
    toString(){ 
        return (`${super.toString()},Student ID: ${this.id}`); 
    } 
} 
let student1 = new student('<b>Sagar Jaybhay</b>',22); 
document.writeln(student1.toString()); 


GitHub: https://github.com/Sagar-Jaybhay


Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Sagar Jaybhay

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

You may also like...