Understanding Object-Oriented Programming in JavaScript

When people start learning JavaScript, they usually begin with variables, functions, arrays, and objects.
But as projects grow bigger, writing everything in one place becomes messy.

That’s where Object-Oriented Programming (OOP) comes in.

OOP helps us organize code better, reuse logic, and model real-world things in a cleaner way.

If terms like class, object, inheritance, or encapsulation sound confusing right now — don’t worry.

In this blog, we’ll break down Object-Oriented Programming in JavaScript in the simplest possible way, with real-world analogies, easy code examples, and practical explanations.

---

What is Object-Oriented Programming (OOP)?

Object-Oriented Programming (OOP) is a programming style where we structure code around objects.

An object is something that contains:

• Properties → data or characteristics

• Methods → actions or behavior

• Real-life example

  Think about a car:

  • Properties: color, brand, model, speed

  • Methods: start(), stop(), accelerate()

  In JavaScript, we can represent this idea using objects and classes.

---

Why Do We Need OOP?

As your application grows, you’ll notice:

• Repeated code everywhere

• Hard-to-manage functions

• Logic scattered in different files

• Difficult debugging

• Poor scalability

OOP solves this by helping you:

• Group related data and behavior together

• Reuse code efficiently

• Create multiple similar objects easily

• Make code easier to read and maintain

• Build scalable applications

This becomes especially useful when building real-world apps like your rental platform project using React/Next.js later on.

---

Before OOP:-

Before learning classes, let’s start with a plain JavaScript object.

const user = {
  name: "Ritu",
  role: "Frontend Developer",
  login() {
    console.log(`${this.name} logged in`);
  }
};

console.log(user.name); // Ritu
user.login(); // Ritu logged in

Here:

• name and role are properties

• login() is a method

This is already object-based programming.

But what if we need 100 users?

Creating objects manually again and again is not efficient.

That’s why we use constructor functions or classes.

---

What is a Class in JavaScript?

A class is like a blueprint.

It defines how objects should be created.

example**:-**

If an object is a house, then a class is the architectural design.

You can create many houses from the same blueprint.

---

Creating a Class in JavaScript

class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }

  login() {
    console.log(`\({this.name} logged in as \){this.role}`);
  }
}

What’s happening here?

• class User → creates a blueprint

• constructor() → runs automatically when a new object is created

• this.name and this.role → assign values to the object

• login() → method shared by all instances

---

What is an Object (Instance)?

An object is a real thing created from a class.

const user1 = new User("Ritu", "Frontend Developer");
const user2 = new User("Aman", "Backend Developer");

user1.login(); // Ritu logged in as Frontend Developer
user2.login(); // Aman logged in as Backend Developer

Important terms

• User → class

• user1, user2 → objects (also called instances)

• new → creates a new object from the class

---

The 4 Pillars of OOP in JavaScript

When people talk about OOP, they usually refer to these 4 core concepts:

1. Encapsulation

2. Abstraction

3. Inheritance

4. Polymorphism

Let’s understand each one clearly.

---

1. Encapsulation in JavaScript

What is Encapsulation?

Bundling data and methods together inside one unit (object/class) and controlling access to some parts of it.

• Keep related things together

• Protect internal details from direct misuse

---

Example:-

Why this is encapsulation

The account’s data (owner, balance) and behavior (deposit, withdraw, getBalance) are grouped together.

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner;
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
    console.log(`Deposited: ₹${amount}`);
  }

  withdraw(amount) {
    if (amount > this.balance) {
      console.log("Insufficient balance");
      return;
    }

    this.balance -= amount;
    console.log(`Withdrawn: ₹${amount}`);
  }

  getBalance() {
    console.log(`Current Balance: ₹${this.balance}`);
  }
}

const account = new BankAccount("Ritu", 5000);

account.deposit(2000);
account.withdraw(1000);
account.getBalance();

---

2. Abstraction in JavaScript

What is Abstraction?

Hiding complex internal details and showing only what the user needs to use.

example:-

When you drive a car:

• You use steering, brake, accelerator

• You do not need to know how the engine combustion works internally

That hidden complexity = abstraction

---

example:-

class CoffeeMachine {
  startMachine() {
    console.log("Machine started...");
  }

  boilWater() {
    console.log("Boiling water...");
  }

  brewCoffee() {
    console.log("Brewing coffee...");
  }

  makeCoffee() {
    this.startMachine();
    this.boilWater();
    this.brewCoffee();
    console.log("Your coffee is ready ☕");
  }
}

const coffee = new CoffeeMachine();
coffee.makeCoffee();

Why this is abstraction

The user only calls:

coffee.makeCoffee();

They don’t need to manually call every internal step.

---

3. Inheritance in JavaScript

What is Inheritance?

Inheritance allows one class to reuse properties and methods from another class.

In simple words

A child class can inherit from a parent class.

This helps avoid repeated code.

---

Example:-

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks`);
  }
}

const dog1 = new Dog("Tommy");

dog1.speak(); // Tommy makes a sound
dog1.bark();  // Tommy barks

What’s happening here?

• Dog extends Animal

• Dog gets access to name and speak()

• Dog also has its own method bark()

This is code reuse in action.

---

Inheritance with super()

When a child class has its own constructor, it must call super().

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // calls parent constructor
    this.breed = breed;
  }

  details() {
    console.log(`\({this.name} is a \){this.breed}`);
  }
}

const dog = new Dog("Bruno", "Labrador");
dog.details();

Why super() is important

It initializes the parent class before using this.

---

4. Polymorphism in JavaScript

What is Polymorphism?

The same method name can behave differently depending on the object.

Simple meaning

One interface, many forms.

---

Example of Polymorphism (Method Overriding)

class Animal {
  speak() {
    console.log("Animal makes a sound");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Cat meows");
  }
}

const dog = new Dog();
const cat = new Cat();

dog.speak(); // Dog barks
cat.speak(); // Cat meows

Why this is polymorphism

All classes use the same method name:

speak();

But each one behaves differently.

---

Constructor Functions vs Classes in JavaScript

Before ES6 classes, JavaScript used constructor functions.

---

Constructor Function Example

function User(name, role) {
  this.name = name;
  this.role = role;
}

User.prototype.login = function () {
  console.log(`\({this.name} logged in as \){this.role}`);
};

const user1 = new User("Ritu", "Developer");
user1.login();

---

Class Version (Modern & Cleaner)

class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }

  login() {
    console.log(`\({this.name} logged in as \){this.role}`);
  }
}

Important:-

Under the hood, JavaScript classes are still based on prototypes.

So:

• JavaScript is prototype-based

• But ES6 classes provide a clean OOP syntax

---

JavaScript is Prototype-Based

Many beginners think JavaScript is purely class-based like Java or C++.

That’s not fully true.

Reality:

JavaScript uses prototypes.

Every object in JavaScript can inherit from another object through the prototype chain.

Classes are mainly syntactic sugar over prototypes.

---

example:-

const user = {
  login() {
    console.log("User logged in");
  }
};

const admin = Object.create(user);

admin.deleteUser = function () {
  console.log("User deleted");
};

admin.login();      // inherited from user
admin.deleteUser(); // own method

What’s happening here?

• admin inherits from user

• admin can access login() through the prototype chain

This is a very important concept for deeper JavaScript understanding.

---

this in JavaScript Classes

The this keyword refers to the current object instance.

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

  showBrand() {
    console.log(this.brand);
  }
}

const car1 = new Car("Tesla");
car1.showBrand(); // Tesla

In this example

this.brand means the brand of the specific object (car1)

Without this, JavaScript wouldn’t know which object’s data to use.

let's take an example of my new website : OOP in a Rental Platform

Since you’ve started a rental platform project, here’s how OOP fits in real-world apps.

Imagine you’re building:

• Property listings

• Tenant profiles

• Visit scheduling

• Support tickets

---

Example

class Property {
  constructor(title, location, price) {
    this.title = title;
    this.location = location;
    this.price = price;
  }

  showDetails() {
    console.log(`\({this.title} in \){this.location} for ₹${this.price}/month`);
  }
}

class Tenant {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  requestVisit(property) {
    console.log(`\({this.name} requested a visit for \){property.title}`);
  }
}

const property1 = new Property("2BHK Apartment", "Gurgaon", 25000);
const tenant1 = new Tenant("Ritu", "ritu@example.com");

property1.showDetails();
tenant1.requestVisit(property1);

Why OOP helps here

• Property handles property-related logic

• Tenant handles tenant-related logic

• Code stays modular and scalable

• Easier to expand when app grows

This is exactly why OOP becomes useful in production-level apps.

---

Advantages of OOP in JavaScript

1. Better Code Organization

Related data and methods stay together.

2. Reusability

You can reuse logic using inheritance and shared methods.

3. Scalability

As your project grows, OOP makes it easier to manage.

4. Maintainability

Debugging and updating code becomes easier.

5. Real-World Modeling

You can model users, products, orders, bookings, properties, etc. naturally.

---

When Should You Use OOP in JavaScript?

OOP is great when:

You’re building large applications

• You have reusable entities (User, Product, Property, Order)

• You want clean architecture

• You need scalable code

Examples

• E-commerce apps

• Rental platforms

• Dashboards

• Admin panels

• Booking systems

• SaaS apps

---