Object-Oriented Programming (OOP) in JavaScript

Object-Oriented Programming is a programming style where we organize code using objects and classes.

Instead of writing separate pieces of code again and again, we create blueprints that can produce many similar objects.
This helps us write clean, reusable, and organized code.

Real World Analogy : Blueprint => Objects

Imagine a car factory.

What do you think, does company build every car from scratch, with a completely new design ?

No, Instead it create blueprint first.
Blueprint -> describe how a car should look and behave.
From that blueprint the factory can produce many cars.

Blueprint: Car
Objects created:
• Car 1
• Car 2
• Car 3

Each car will have properties like:

• color

• speed

• brand

And actions like:

• start()

• stop()

• accelerate()

In programming:

• Class = Blueprint

• Object = Actual instance created from the blueprint

What is a Class in JavaScript ?

A class is a template used to create objects.

It defines :

• properties (Data)

• methods (Functions that describe behavior)

class Car {
    constructor(brand, color) {
        this.brand = brand;
        this.color = color;
    }

    start() {
        console.log(this.brand + " car started");
    }
}

Here :

• Car is a class

• brand and color is properties

• start() is a method.

• this : The this keyword refers to the object that is currently executing the code.

Creating Objects using Classes.

We have seen how can we create classes lets see how to create objects using that class.

const car1 = new Car("Lamborghini", "Green");
const car2 = new Car("Honda", "Black");

car1
brand: Lamborghini
color: Green

car2
brand: Honda
color: Black

Now we have 2 car objects car1 and car2 ;

and since we have created a method name start() in our class we can call that on our objects.

car1.start(); // Lamborghini car started
car2.start(); // Honda car started

The Constructor Method

The constructor is a special method that runs automatically when an object is created.

It is used to initialize object properties.

constructor(parameters) {
    // initialization code
}

Encapsulation

Encapsulation means keeping data and the methods that operate on that data together inside a class.
Instead of spreading data everywhere, we keep it organized.

class BankAccount {
    constructor(owner, balance){
        this.owner = owner;
        this.balance = balance;
    }
    // Deposit method that takes a
    deposit(amount) {
        this.balance  += amount;
        console.log("New Balance is : ", this.balance);
    }
}

Now using this deposit method.

const account = new BankAccount("Saif", 1000);

account.deposit(500);

Inheritance

Inheritance is an Object-Oriented Programming concept where a class can inherit properties and methods from another class.
It allows us to reuse code instead of rewriting the same logic multiple times.

Think about vehicles.

All vehicles have common things like :

• Brand

• speed

• start()

that means we can define these things once and use it again and again in out code without rewriting it.

class Vehicle {
    constructor(brand) {
        this.brand = brand
    }

    start() {
        console.log(this.brand + " vehicle started")
    }
}
// Creating child class
class Car extends Vehicle {

}
const car1 = new Car("Toyota"); // Created car1 Object from Car class.
// And since Car class is extended from Vehicle it can have all the properties and methods of vehicle class.

// therefore we can do this 
car1.start();
// output : Toyota vehicle started

We can also use constructor in the child class.

class Vehicle {
    constructor(brand) {
        this.brand = brand
    }

    start() {
        console.log(this.brand + " vehicle started")
    }
}

class Car extends Vehicle {
    constructor(brand, model) {
        super(brand)   // calls parent constructor
        this.model = model
    }

    showModel() {
        console.log("Model:", this.model)
    }
}

const car1 = new Car("Toyota", "Fortuner")

car1.start()
car1.showModel()
 // output
// Toyota vehicle started
// Model: Fortuner