Understanding Object-Oriented Programming in JavaScript

What is Object-Oriented Programming?

Object-Oriented Programming (OOPS) is programming paradigm.

It is a way of writing a program.

In this, we write our code to simulate real-world projects.

Like real-world objects has properties, attributes and methods, our programmed objects also has properties, attributes and methods.

These properties can be inherited by children from parents and grandparents.

Why OOPS?

There are many benefits of OOPS:

• Security - Sensitive data cannot be accessed by users

• Inheritance - Same properties need not be repeated for new objects but can be inherited from another objects. Allows reusability of code.

Car Analogy

Car is an object that contains following properties:

• 4 wheels

• engine

• start()

Now, these properties of Car object can be inherited by Maruti, Toyota, Tesla, etc.

Toyota Object will have following properties:

• 4 wheels (inherited)

• engine (inherited)

• start() (inherited)

• petrol type

Maruti Object will have following properties:

• 4 wheels (inherited)

• engine (inherited)

• start() (inherited)

• diesel type

Tesla Object will have following properties:

• 4 wheels (inherited)

• engine (inherited)

• start() (inherited)

• electric type

How to write Object Oriented Programming in JavaScript?

JS allows OOPs by class.

What is class?

class is wrapper on top of regular functions in JS.

It has a constructor function which is invoked every time an object is created.

Syntax:

class ClassName{
    constructor(){
        // properties
    }

    // methods
}

Now how to create an object from the class?

Objects are created from class using new keyword,

new keyword calls the constructor of the class and returns an object

Syntax:

const objectName = new ClassName();

Example

Car

class Car{
    constructor(engine){
        this.wheels = 4;
        this.engine = engine;
    }
    start(){
        console.log(`Car has started!`);
    }
}

class Maruti extends Car{
    constructor(){
        super("k-series"); // calling Car class constructor
        this.type = "diesel";
    }
}

class Toyota extends Car{
    constructor(){
        super("V6"); // calling Car class constructor
        this.type = "petrol";
    }
}

class Tesla extends Car{
    constructor(){
        super("IPM-SynRM"); // calling Car class constructor
        this.type = "electric";
    }
}

const car1 = new Car("V8");

const swift = new Maruti();

const camry = new Toyota();

const modelY = new Tesla();

car1.start(); // "Car has started!"

swift.start(); // "Car has started!"

camry.start(); // "Car has started!"

modelY.start(); // "Car has started!"

console.log(swift.type); // "diesel"

console.log(camry.type); // "petrol"

console.log(modelY.type); // "electric"

Encapsulation

As we know that OOPs improves security.

But how?

Using access modifiers.

Access Modifiers restrict access to certain properties.

This is the core idea of encapsulation.

Inside class, we can declare each property or method as private (#propertyName) or public (propertyName).

private properties or methods cannot be accessed outside the class.

public properties or methods can be accessed outside the class by the objects using dot notation.

Example

class BankAccount{
    #pin;
    #amount;
    constructor(amount = 0){
        this.#amount = amount;
    }
    getAmount(pin){
        if(this.#pin === pin) console.log(`Total Amount: ${this.#amount}`);
        else console.log(`Invalid Pin`);
    }
    deposit(amount){
        this.#amount += amount;
    }
    setPin(pin){
        this.#pin = pin;
    }
    withdraw(amount, pin){
        if(this.#pin === pin){
            this.#amount -= amount;
            console.log(
            `
Amount withdrawn: ${amount}
Amount Left: ${this.#amount}
            `
            );
        }
        else console.log(`Invalid Pin`);
    }
}

const account1 = new BankAccount();

account1.setPin(1234);

account1.getAmount(1234); // "Total Amount: 0"

account1.deposit(1000);

account1.getAmount(1234); // "Total Amount: 1000"

account1.withdraw(500, 1234); 
// "Amount withdrawn: 500"
// "Amount Left: 500"

account1.getAmount(1247); // "Invalid Pin"

account1.#pin = 1247; // Error