SAURAV KUMAR

Posted on Apr 9

Object-Oriented Programming (OOP) in JavaScript — Explained in Simple Words

#webdev #programming #javascript #beginners

What is OOP in JavaScript? Explained in Simple Words

If you are starting OOP, one thing can feel confusing at first:

People use words like class, object, methods, and attributes — but it’s not always clear what they actually mean in JavaScript.

When I started learning it, I realized OOP is not just about syntax.

It is more about how we organize code.

Instead of writing only step-by-step instructions, we try to model real-world things as objects that contain both data and behavior.

In this post, let’s understand Object-Oriented Programming (OOP) in JavaScript in very simple words.

🧠 What is OOP?

Object-Oriented Programming (OOP) is a programming style based on objects.

An object can contain:

data → like name, age, balance
behavior → like login, deposit, withdraw

In simple words, OOP helps us keep related data and functionality together.

For example, if we create a Bank Account in JavaScript, it can have:

account holder name
balance
account number
methods like deposit() and withdraw()

So instead of keeping everything separate, OOP lets us organize it in a cleaner way.

📦 Class and Object in JavaScript

OOP mainly revolves around two basic things:

Class

A class is a blueprint.

It defines what an object should have and what it should do.

Object

An object is a real instance created from that class.

Let’s see a simple JavaScript example:

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

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

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

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

const account1 = new BankAccount("Saurav", 5000, "ACC123");

account1.deposit(1000);
account1.withdraw(2000);

Here:

BankAccount is the class
account1 is the object
name, balance, and accountNumber are properties
deposit() and withdraw() are methods

That’s the core idea.

🔄 Procedural Programming vs OOP

Before OOP, many programs were written using procedural programming.

In procedural programming, we focus more on writing functions step by step.

In OOP, we focus more on entities and their behavior.

Let’s understand the difference in a simple way.

1. Approach

Procedural programming follows a sequence of steps.

OOP models the system using objects.

2. Data Handling

In procedural programming, data is often handled separately and can be modified more easily from different places.

In OOP, data is usually kept inside objects and accessed through methods.

This makes the code more organized and safer.

3. Code Reusability

In procedural programming, we can reuse functions.

But in OOP, reusability is stronger because we can extend existing code using concepts like inheritance.

That makes it easier to build bigger systems.

4. Scalability

Procedural code can become harder to manage as the project grows.

OOP is usually easier to scale because we can add new classes or extend old ones without changing everything.

5. Modularity

In procedural programming, code is divided into functions.

In OOP, code is divided into classes and objects, which makes large applications easier to manage.

6. Real-World Modeling

This is one of the biggest reasons OOP feels natural.

Real software often deals with things like:

users
accounts
products
orders
employees

OOP lets us represent these directly in code.

💻 Procedural vs OOP Example in JavaScript

Let’s take the same bank example.

Procedural style

let accountName = "Saurav";
let balance = 5000;

function deposit(amount) {
  balance += amount;
  console.log(`₹${amount} deposited. New balance: ₹${balance}`);
}

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

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

deposit(1000);
withdraw(2000);

This works.

But if we need multiple users, multiple accounts, and more features, this style becomes messy.

Now look at the OOP version.

OOP style

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

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

  withdraw(amount) {
    if (amount > this.balance) {
      console.log(`${this.name} has insufficient balance`);
      return;
    }

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

const user1 = new BankAccount("Saurav", 5000);
const user2 = new BankAccount("Rahul", 3000);

user1.deposit(1000);
user2.withdraw(500);

Now each account has its own data and behavior.

That is much cleaner and easier to manage.

🚀 Why OOP is Useful in Real Projects

There are a few big reasons why OOP is widely used.

1. Modularity

OOP helps break a big problem into smaller parts.

For example, in a banking app, we can create separate classes for:

Account
Customer
Transaction

This makes the code more structured.

2. Code Reusability

We can reuse and extend existing code instead of writing similar logic again and again.

Example:

class Vehicle {
  start() {
    console.log("Vehicle started");
  }
}

class Car extends Vehicle {}
class Bike extends Vehicle {}

const car = new Car();
car.start();

Here, Car and Bike can reuse behavior from Vehicle.

3. Scalability

As the application grows, OOP makes it easier to add new features.

Instead of changing unrelated code, we can create new classes or extend old ones.

4. Security

OOP also helps us control how data is accessed.

We should not let every part of the app directly modify important values.

Instead, we should use methods.

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

  deposit(amount) {
    if (amount <= 0) {
      console.log("Invalid amount");
      return;
    }
    this.balance += amount;
  }

  getBalance() {
    return this.balance;
  }
}

This approach makes the code more controlled and predictable.

🏦 Real-Life Analogy: Bank System

A bank is one of the easiest examples to understand OOP.

Here’s how:

Classes → Account, Customer, Transaction
Objects → Raj’s account, Saurav’s account, one specific transaction
Attributes → name, balance, account number
Methods → deposit, withdraw, transfer

This is why OOP is powerful.

It maps very naturally to real-world systems.

🎯 Why OOP is Better for Large Applications

For very small programs, procedural programming can still work fine.

But when an application becomes large, OOP gives better structure.

It helps with:

better organization
cleaner code
easier maintenance
easier scaling
more reusable logic

That’s why OOP is so common in real projects.

📝 A Simple Way to Think About OOP

If you are just starting, remember this:

Class = blueprint
Object = real thing created from blueprint
Properties = data
Methods = actions

That’s enough to build a strong base.

You do not need to make it complicated in the beginning.

🎤 How to Explain OOP in an Interview

If someone asks:

What is OOP?

You can say:

OOP is a programming paradigm where we model real-world entities as objects. These objects contain both data and behavior. In JavaScript, we usually create objects from classes, where the class acts like a blueprint.

If they ask:

Why is OOP useful?

You can say:

OOP helps with modularity, reusability, scalability, and better code organization. It is especially useful for building large and maintainable applications.

✅ Final Thoughts

OOP is not just a theory topic.

It is a practical way to write cleaner and more organized code.

In JavaScript, once you understand:

class
object
properties
methods

everything starts making more sense.

So if you’re learning OOP right now, don’t rush into advanced terms.

Start with small real-world examples like:

bank account
student
user
cart
product

That makes OOP much easier to understand.

If you're also learning JavaScript for interviews, this topic is worth understanding properly because it helps both in coding and in explaining design clearly.

🙋‍♂️ About Me

Hi, I’m Saurav Kumar.

I enjoy learning, building, and writing about web development in simple words, especially topics that are useful for beginners and developers preparing for interviews.

Right now, I’m also focusing on improving my understanding of core concepts like JavaScript, OOP, system design, and software engineering fundamentals.

You can connect with me here:

GitHub: github.com/saurav02022
LinkedIn: linkedin.com/in/saurav02022

DEV Community