Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming in JavaScript

Updated
4 min readView as Markdown

Object-Oriented Programming (OOP) is one of the most important programming concepts every JavaScript developer should understand. Instead of writing code as a long sequence of instructions, OOP help us organize code into objects that represents real-world things.

But what exactly is OOP, and why should we care?
Let's break it down in simple way.

What is Object-Oriented Programming?

Object-Oriented Programming is a programming style where we structure our code using objects.

An object is simply a collection of:

  • Properties (data) - information about the object

  • Methods (function) - actions the object can perform

Think of objects as real world entities in code.

Example:

const car = {
    brand: "Toyota",
    speed: 120,
    drive() {
        console.log("Car is driving");
    }
}

Here:

  • brand and speed -> properties

  • drive() ->method

Real-World Analogy: Blueprint --> Objects

The easiest way to understand OOP is by thinking about blueprints.

A blueprint describes how something should be built, but it is not the actual object.

Imagine a car factory:

  1. A blueprint defines how car should be built.

  2. The factory uses that blueprint to create multiple cars.

In programming:

Real World Programming
Blueprint Class
Car Object

So a class is like a blueprint, and objects are the actual products created from it.

What is a Class in JavaScript?

A class defines the structure for creating objects.

It defines:

  • What properties objects should have.

  • What methods objects can perform.

Example:

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

Here we defined a Car class, but no car exists yet.

Creating Objects Using Classes

Once a class is defined, we can create objects using the new keyword.

Example:

const car1 = new Car("Toyota", 120);
const car2 = new Car("Honda", 140);

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

Output conceptually:

Car { brand: "Toyota", speed: 120 }
Car { brand: "Honda", speed: 140 }

Both objects follow the same structure defined in the class.
This is the power of code reuse.

The Constructor Method

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

It is used to initialize object properties.

Example:

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

When we create new person:

const p1 = new Person("Tony", 24);

The constructor automatically sets:

  • name -> Tony

  • age -> 24

Methods Inside a Class

Classes can also contain methods, which define behaviors of objects.

Example:

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

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

Create an object and call the method:

const person1 = new Person("Steve", 25);

persone1.greet();

Output:

Hello, my name is Steve

Basic Idea of Encapsulation

Encapsulation means bundling data and methods together inside a class and controlling how they are accessed.

Instead of writing scattered code, we organize everything related to an object in one place.

Example:

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

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

    getBalance() {
        return this.balance;
    }
}

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

account.deposit(500);
console.log(account.getBalance);

Here:

  • owner and balance -> data

  • deposit and getBalance -> behavior

Everything related to band account is contained inside the class.

Why OOP is Helpful

Using OOP provides several benefits:

  1. Code Reusability
    We can reuse the same class to create many objects.

  2. Better Organization
    Code becomes easier to read and maintain

  3. Real-World Modeling
    Programs can represent real-world things like users, products, cars, etc

Assignment

Try on your own First:

Step 1: Create a Student Class

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

    printDetails() {
        console.log(this.name + " is " + this.age + " years old.");
    }
}

Step 2: Create multiple objects

const s1 = new Student("Clint", 20);
const s2 = new Student("Bruce", 22);
const s3 = new Student("Peter", 19);

Step 3: Call the methods

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

Expected output:

Clint is 20 years old.
Bruce is 22 years old.
Peter is 19 years old.

Final Thoughts

Object-Oriented Programming might sound complicated at first, but the core idea is simple:

Use classes as blueprints and objects as real instance.

Once we understand this concept, writing structured JavaScript becomes much easier.