Skip to main content

Command Palette

Search for a command to run...

Understanding of Object-Oriented Programming in JavaScript

Updated
Understanding of Object-Oriented Programming in JavaScript

So far, you’ve learned how to work with objects and how this behaves inside them. You’ve also seen how functions can be reused and controlled.

But there is still a problem.

Imagine you need to create multiple users in your application. Each user has a name, age, and some common behavior.

You could write something like this:

const user1 = {
  name: "Shikhar",
  age: 25,
  greet: function() {
    console.log(this.name);
  }
};

const user2 = {
  name: "Rahul",
  age: 30,
  greet: function() {
    console.log(this.name);
  }
};

This works, but you are repeating the same structure again and again.

This is where Object-Oriented Programming comes in.


What is Object-Oriented Programming?

Object-Oriented Programming, or OOP, is a way of structuring your code using objects.

Instead of writing everything separately, you define a structure once and create multiple objects from it.

The main goal is simple.

Write reusable and organized code.


Real-World Analogy

Think of a car.

Before a car is made, there is a blueprint.

The blueprint defines:

  • engine type

  • color

  • design

Using that blueprint, you can create multiple cars.

Each car is different, but they all follow the same structure.

In JavaScript:

  • Blueprint → Class

  • Car → Object


What is a Class in JavaScript?

A class is like a blueprint for creating objects.

It defines what properties and methods an object should have.

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

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

Here:

  • Person is the class

  • constructor initializes values

  • greet is a method


Creating Objects from a Class

Once the class is defined, you can create objects from it.

const person1 = new Person("Shikhar", 25);
const person2 = new Person("Rahul", 30);

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


Understanding the Constructor

The constructor is a special method inside a class.

It runs automatically when a new object is created.

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

It assigns values to the object.


Methods Inside a Class

Methods are functions defined inside a class.

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

Each object created from the class can use this method.

person1.greet(); // Hello Shikhar
person2.greet(); // Hello Rahul

Why This is Better

Instead of repeating code, you define it once.

Now you can create as many objects as you want.

This makes your code:

  • cleaner

  • reusable

  • easier to manage


Basic Idea of Encapsulation

Encapsulation means keeping data and behavior together.

In the class:

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

  greet() {
    console.log(this.name);
  }
}

The data (name) and behavior (greet) are inside the same structure.

This makes your code more organized.


Putting Everything Together

Let’s build a complete example.

We will create a class called Student.

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

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

Now create multiple objects:

const student1 = new Student("Amit", 20, "Engineering");
const student2 = new Student("Neha", 22, "Design");
const student3 = new Student("Rahul", 21, "Computer Science");

Use the method:

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

Output:

Amit is 20 years old and studies Engineering
Neha is 22 years old and studies Design
Rahul is 21 years old and studies Computer Science

Here, one class is used to create multiple objects with different data.


Visual Understanding

Think of it like this:

Class (Blueprint)
        ↓
Creates
        ↓
Multiple Objects (Instances)

Each object is an instance of the class.


Final Thought

Object-Oriented Programming is not about complex theory.

It is about writing code in a structured and reusable way.

Instead of repeating logic, you define a blueprint and create objects from it.

This is how real-world applications are built.

Once you understand this, your code starts becoming cleaner and easier to scale.

Object Oriented JavaScirpt

Part 1 of 2

Object-Oriented JavaScript is a practical series focused on helping you understand how OOP works in JavaScript. From objects and prototypes to classes, inheritance, and core OOP principles like encapsulation and polymorphism, this series breaks everything down into simple, real-world examples. By the end, you’ll not only understand OOP concepts but also know how to apply them to write cleaner, scalable, and maintainable JavaScript code.

Up next

The new Keyword in JavaScript

What Actually Happens Behind the Scenes