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
πŸ—οΈ Understanding Object-Oriented Programming (OOP) in JavaScript
S

Like to study,fitness freak,my looks is my first priority, hardworking person, like discipline and love to learn new thing

When projects grow bigger, writing everything as separate variables and functions becomes messy.

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

OOP is a programming style where we organize code using objects and classes.


πŸ“Œ What is Object-Oriented Programming (OOP)?

Object-Oriented Programming is a way of writing code using:

  • Classes (blueprints)

  • Objects (real instances)

  • Properties (data)

  • Methods (functions inside objects)

It helps in:

  • Organizing code

  • Reusing code

  • Making programs scalable


πŸš— Real-World Analogy: Blueprint β†’ Objects

Think about a car factory.

A company creates a blueprint for a car.

From that blueprint, they manufacture:

  • Car 1

  • Car 2

  • Car 3

Each car has:

  • Brand

  • Color

  • Speed

The blueprint is like a class.
Each manufactured car is an object.


πŸ“Š Blueprint β†’ Object Diagram

        Class (Blueprint)
              ↓
        ----------------
        |   Car Class  |
        ----------------
           ↓       ↓       ↓
        Car1    Car2    Car3
       (Object) (Object) (Object)

One blueprint β†’ Multiple objects.


πŸ›οΈ What is a Class in JavaScript?

A class is a template used to create objects.

In JavaScript, we use the class keyword.


πŸ”Ή Example: Creating a Class

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

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

Let’s break it down.


🧱 Constructor Method

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

It is used to initialize properties.

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

this refers to the current object.


🧍 Creating Objects from a Class

Now we create objects using the new keyword.

let person1 = new Person("Ilyas", 21);
let person2 = new Person("Rahul", 22);

Now we have two different objects created from the same class.


πŸ”§ Calling Methods

person1.greet();
person2.greet();

Output:

Hello, my name is Ilyas
Hello, my name is Rahul

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


πŸ“Š Class β†’ Instance Relationship

Class: Person
   ↓
person1 β†’ { name: "Ilyas", age: 21 }
person2 β†’ { name: "Rahul", age: 22 }

Class defines structure.

Objects store actual data.


🧠 Methods Inside a Class

Methods are functions written inside a class.

Example:

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

  drive() {
    console.log(this.brand + " is driving.");
  }
}

Here:

  • brand and color β†’ properties

  • drive() β†’ method


πŸ”’ Basic Idea of Encapsulation

Encapsulation means:

πŸ‘‰ Keeping data and related methods together inside a class.

Instead of writing:

let name = "Ilyas";
let age = 21;

function greet() {
  console.log("Hello " + name);
}

We organize it like this:

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

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

Everything related to a person stays inside the Person class.

That’s cleaner and more organized.


🎯 Why OOP is Powerful

  • Code becomes reusable

  • Easy to manage large projects

  • Clear structure

  • Real-world modeling becomes easier

Instead of rewriting logic, we reuse the class.


🎯 Mini Assignment

1️⃣ Create a Student class

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

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

2️⃣ Create multiple student objects

let student1 = new Student("Aman", 20);
let student2 = new Student("Priya", 21);

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

You just created reusable student objects.


πŸ’‘ Final Thoughts

Object-Oriented Programming helps you:

  • Structure code properly

  • Avoid repetition

  • Build scalable applications

  • Model real-world systems

Almost all modern frameworks (React, Angular, Node.js apps) rely heavily on OOP concepts.

Master this, and your JavaScript level jumps significantly.