Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming (OOP) in JavaScript

Updated
•4 min read•View as Markdown

When programs become bigger, we need a better way to organize code.

That is where Object-Oriented Programming (OOP) helps.

OOP is a programming style where we create objects that contain data and actions together.

Let’s understand it in a very simple way.


1. What is Object-Oriented Programming?

Object-Oriented Programming means organizing code using objects.

An object contains:

  • Properties → data

  • Methods → actions

Example: A car

A car has:

Properties
- color
- brand
- speed
Methods
- start()
- stop()
- accelerate()

So an object combines data + behavior.


2. Real-World Analogy: Blueprint → Objects

Imagine you want to build cars.

First, engineers create a blueprint.

Car Blueprint
- color
- brand
- speed

Using this blueprint, we can create many cars.

Example:

Car 1 → Red BMW
Car 2 → Blue Audi
Car 3 → Black Tesla

In programming:

Blueprint → Class
Real Car → Object

So:

Class = blueprint
Object = real thing created from blueprint

3. What is a Class in JavaScript?

A class is a template used to create objects.

Example:

class Car {

}

This class is like a design plan.

We will use it to create many cars.


4. Creating Objects Using Classes

We use the new keyword to create objects.

Example:

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

let car1 = new Car("BMW");
let car2 = new Car("Audi");

console.log(car1.brand);
console.log(car2.brand);

Output:

BMW
Audi

Here:

  • Car → class

  • car1, car2 → objects


5. The Constructor Method

The constructor runs automatically when an object is created.

It helps us initialize properties.

Example:

class Person {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

}

Now we can create objects.

let p1 = new Person("Rahul", 25);
let p2 = new Person("Anita", 22);

Each object gets its own values.


6. Methods Inside a Class

Methods are functions inside a class.

They describe what the object can do.

Example:

class Person {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name);
  }

}

Create object:

let person1 = new Person("Rahul", 25);

person1.greet();

Output:

Hello, my name is Rahul

Here:

  • greet() is a method.

7. Basic Idea of Encapsulation

Encapsulation means keeping related data and functions together.

Example:

class BankAccount {

  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }

}

Here the object stores:

  • data → balance

  • action → deposit()

Both are inside the same class.

This makes code clean and organized.


Simple Visualization

Blueprint → Object

Class: Car
│
├─ brand
├─ color
└─ start()

Objects created:

car1 → BMW
car2 → Audi
car3 → Tesla

One blueprint → many objects.


Why OOP is Useful

Object-Oriented Programming helps developers:

✔ organize code
✔ reuse code
✔ build large applications
✔ keep data and functions together

Modern frameworks like React, Node.js apps, and backend systems often use OOP concepts.


Assignment Practice

Try this in your browser console.


1. Create a Student Class

class Student {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  printDetails() {
    console.log("Name: " + this.name);
    console.log("Age: " + this.age);
  }

}

2. Create Multiple Student Objects

let student1 = new Student("Ravi", 20);
let student2 = new Student("Anjali", 21);

3. Call the Method

student1.printDetails();
student2.printDetails();

Output:

Name: Ravi
Age: 20

Name: Anjali
Age: 21

Each object has its own data, but they share the same class structure.


Class → Instance Relationship

Class (Blueprint)
       ↓
  Student Class
       ↓
Objects (Instances)

student1
student2
student3

One class can create many objects.