Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming in JavaScript

Updated
6 min read

JavaScript supports multiple programming styles, and one of the most powerful among them is Object-Oriented Programming (OOP).
OOP helps developers structure code in a way that models real-world entities, making programs easier to understand, reuse, and maintain.

In this article, we’ll explore the fundamentals of Object-Oriented Programming in JavaScript, including classes, objects, constructors, methods, and the basic concept of encapsulation.

By the end, you’ll also build a small Student class example to understand how everything works together.

What is Object-Oriented Programming (OOP)?

Object-Oriented Programming (OOP) is a programming approach where we structure code using objects that represent real-world entities.

Instead of writing unrelated functions and variables, OOP organizes code into objects that contain both data and behavior.

An object typically contains:

  • Properties (data) → information about the object

  • Methods (functions) → actions the object can perform

For example:

A Car object might contain:

Properties:

  • brand

  • color

  • speed

Methods:

  • start()

  • stop()

  • accelerate()

So instead of writing scattered functions, we keep everything related to the car inside one object.

This makes the code cleaner, reusable, and easier to maintain.

Real-World Analogy: Blueprint → Objects

A good way to understand OOP is through a blueprint analogy.

Think about building cars.

A car company first designs a blueprint.
This blueprint defines:

  • the structure of the car

  • the parts it will have

  • how it behaves

From that single blueprint, many cars can be produced.

Example:

Blueprint → Car model
Objects → Individual cars built from that model

Blueprint (Class) → Car

Car 1
Car 2
Car 3

Each car has the same structure but different values.

Example:

Car 1

  • brand: Tesla

  • color: red

Car 2

  • brand: BMW

  • color: black

In programming:

  • Blueprint = Class

  • Actual items = Objects

What is a Class in JavaScript?

A class is like a blueprint for creating objects.

It defines:

  • what properties an object will have

  • what actions (methods) it can perform

JavaScript introduced the class syntax in ES6, making OOP easier and more readable.

Example:

class Car {
  brand;
  color;
}

This class describes a car but does not create a real car yet.

To create real objects from this class, we need to instantiate it.

Creating Objects Using Classes

Objects are created using the new keyword.

Example:

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

const car1 = new Car("Tesla", "Red");
const car2 = new Car("BMW", "Black");

Now we have two separate objects.

car1 → Tesla, Red
car2 → BMW, Black

Both were created from the same class but hold different values.

This is one of the biggest advantages of OOP:
code reuse.

Instead of rewriting the same structure again and again, we use a class blueprint.

The Constructor Method

The constructor is a special method inside a class.

It runs automatically when a new object is created.

Its main purpose is to initialize properties.

Example:

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

When we create an object:

const person1 = new Person("Rith", 22);

The constructor automatically sets:

this.name = "Rith"
this.age = 22

So every new object starts with its own values.

Methods Inside a Class

Methods define what an object can do.

They are simply functions defined inside a class.

Example:

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

  start() {
    console.log(this.brand + " is starting...");
  }
}

Creating an object:

const myCar = new Car("Tesla");
myCar.start();

Output:

Tesla is starting...

Here:

  • start() is a method

  • myCar is the object

  • Car is the class

Methods allow objects to perform actions.

Basic Idea of Encapsulation

Encapsulation means bundling data and methods together inside an object and controlling access to them.

In simple terms:

Keep related data and behavior together and hide unnecessary details.

Example:

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

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

Here:

  • balance is the data

  • deposit() is the behavior

Both are wrapped inside the same class.

Encapsulation helps:

  • protect internal data

  • keep code organized

  • prevent accidental modification

JavaScript also supports private fields using #, but beginners usually learn the basic concept first.

Example: Creating a Student Class

Let’s build a simple example to bring everything together.

We will create a Student class.

Properties:

  • name

  • age

Method:

  • display student details

Example:

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

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

Now let's create multiple students.

const student1 = new Student("Riya", 20);
const student2 = new Student("Arjun", 22);

Using the method:

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

Output:

Name: Riya
Age: 20

Name: Arjun
Age: 22

Both students share the same structure but contain different data.

This is exactly how OOP enables reusable code.

Visual Understanding: Class → Object

Think of it like this:

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

student1
student2
student3

Each object is an instance of the class.

Why OOP is Useful

Object-Oriented Programming provides several benefits:

1. Code Reusability

Write a class once and create many objects from it.

2. Better Organization

Related data and methods stay together.

3. Easier Maintenance

Large applications become easier to manage.

4. Real-World Modeling

It mirrors real-world objects like cars, users, students, etc.

This is why many large applications and frameworks use OOP principles.

Conclusion

Object-Oriented Programming is an important concept in JavaScript that helps developers write structured and maintainable code.

In this article we learned:

  • What Object-Oriented Programming means

  • The blueprint → object analogy

  • What a class is in JavaScript

  • How to create objects using classes

  • The role of the constructor method

  • How methods work inside a class

  • The basic idea of encapsulation

We also built a simple Student class example to see how these concepts work together.

Once you're comfortable with these basics, the next step is to explore deeper OOP concepts like:

  • Inheritance

  • Polymorphism

  • Private fields

  • Prototypes in JavaScript

Mastering these ideas will help you write more scalable and professional JavaScript applications.