Understanding Object-Oriented Programming in JavaScript

When people start learning JavaScript seriously, sooner or later they hear this term:
Object-Oriented Programming (OOP).

At first it sounds like something very complicated or “advanced”. But honestly, the idea behind OOP is actually very simple. In this blog I’ll explain OOP step by step with small examples.

By the end of this post you’ll understand what Object-Oriented Programming actually means, how classes work in JavaScript, how to create objects from classes, what the constructor does, how methods work inside classes, & the basic idea of encapsulation.

No complicated theory. Just simple examples. So let’s start from the beginning.

---

What is Object-Oriented Programming?

Object-Oriented Programming is simply a way of organizing code using objects. Instead of writing random functions and variables everywhere, we group related things together.

Think about real life for a second.
A car has properties:

• brand

• color

• speed

Behaviors:

• start

• accelerate

• brake

In programming we represent the same idea like this:

Real World        Code
-----------       ------------
Car               Object
color             Property
start()           Method

So in simple words OOP models real-world things using objects in code. And the biggest advantage of this approach is Code becomes organized, reusable, easier to maintain

---

The Blueprint Analogy

The easiest way to understand OOP is with the blueprint analogy. Imagine an architect designing a house blueprint. That blueprint describes things like number of rooms, doors, windows, kitchen. But the blueprint itself is not a house, it’s just the design. Using that blueprint, you can build many houses.

Blueprint (Class)
        ↓
   build houses
        ↓
House1   House2   House3

Each house is separate. One house can be red, another blue. But all houses follow the same blueprint structure.

In JavaScript:
Blueprint => Class
House => Object

This is the core idea of OOP.

---

What is a Class in JavaScript?

A class is basically a template for creating objects. It defines what properties the object will have, what methods the object can perform

class Car {

}

Right now the class is empty. It doesn't do anything yet, but it is the blueprint. Now let’s make it useful.

---

The Constructor Method

Every class can have a special method called constructor. The constructor runs automatically when a new object is created. Its job is to initialize the object with data.

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

Here’s what’s happening when a new Car is created:

• brand is assigned to this.brand

• color is assigned to this.color

this refers to the object being created. So every object gets its own values.

---

Creating Objects from a Class

To create an object from a class we use the new keyword.

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

const car1 = new Car("Toyota", "Red");
const car2 = new Car("Honda", "Blue");

Now we have two objects.

Car Class
   ↓
car1 (Toyota, Red)

car2 (Honda, Blue)

Both objects follow the same structure but contain different data.

console.log(car1.brand); // Toyota
console.log(car2.color); // Blue

That’s the power of classes. We write the structure once and create many objects from it.

---

Methods Inside a Class

Properties store data. Methods define behavior. A method is simply a function inside the class.

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

  describe() {
    console.log(`This is a \({this.color} \){this.brand}`);
  }
}

Now let's create a car.

const myCar = new Car("Tesla", "Black");

myCar.describe();

This is a Black Tesla

Notice how the method uses:

this.brand
this.color

this refers to the object calling the method. So if another object calls the same method:

const car2 = new Car("BMW", "White");

car2.describe();

This is a White BMW

Same method. Different objects.

---

Example: Person Class

Let’s create something more relatable.

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

  introduce() {
    console.log(`Hi, I'm \({this.name} and I'm \){this.age} years old`);
  }
}

Now create objects.

const p1 = new Person("Nausheen", 21);
const p2 = new Person("Aman", 24);

p1.introduce();
p2.introduce();

Hi, I'm Nausheen and I'm 21 years old
Hi, I'm Zaroon and I'm 24 years old

Same class. Different people.

---

The Idea of Encapsulation

Another important concept in OOP is encapsulation.

Encapsulation means keeping related data and methods together inside one object. Think about a bank account. You don’t directly change the balance from outside.

Instead you use actions like:

• deposit()

• withdraw()

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

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

  showBalance() {
    console.log(`Balance: ${this.balance}`);
  }
}

Using it:

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

account.deposit(1000);

account.showBalance();

Balance: 6000

The class controls how the data changes. This keeps the system safe and organized.

---

Why OOP Makes Code Reusable

Imagine you are building a school management app. Without classes you might write something like this:

const student1 = { name: "Ali", age: 18 };
const student2 = { name: "Sara", age: 19 };
const student3 = { name: "John", age: 17 };

If you need 100 students, you keep repeating code.

But with a class:

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

  printDetails() {
    console.log(`\({this.name} is \){this.age} years old`);
  }
}

Now creating students becomes easy.

const s1 = new Student("Ali", 18);
const s2 = new Student("Sara", 19);
const s3 = new Student("John", 17);

s1.printDetails();
s2.printDetails();
s3.printDetails();

Write the class once, reuse it many times.

---

Visualizing Class --> Object Relationship

Think of it like this:

        Class
      (Blueprint)
           ↓
   -----------------
   |      |       |
Object1 Object2 Object3

Class: Student

Objects:
Student1
Student2
Student3

Each object has its own data but follows the same structure.

---

Small Practice Assignment

Now it’s your turn. Create a class called Student.

Requirements:

• properties: name, age

• method: printDetails()

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

  printDetails() {
    console.log(`\({this.name} is \){this.age} years old`);
  }
}

Now create multiple students:

const s1 = new Student("Riya", 20);
const s2 = new Student("Arjun", 22);
const s3 = new Student("Meera", 19);

s1.printDetails();
s2.printDetails();
s3.printDetails();

Try modifying it yourself. Add new properties. Add new methods. That’s the best way to learn OOP.

---

Final Thoughts

Object-Oriented Programming may sound complex at first, but the core idea is actually simple.

Remember these key points:

• A class is a blueprint

• An object is created from that blueprint

• Constructor initializes object data

• Methods define what objects can do

• Encapsulation keeps related logic together

Once you get comfortable with classes and objects, your JavaScript code becomes cleaner, reusable, and easier to manage.
And the best part?
OOP concepts you learn in JavaScript apply to many other languages like Java, Python, and C++ as well. So mastering it here will help you everywhere.