Understanding Object-Oriented Programming in JavaScript

What Object-Oriented Programming (OOP) Means

Object-Oriented Programming (OOP) is a programming style where we organize code using objects and classes.

Instead of writing the same logic again and again, we create reusable structures that represent real-world things.

For example, a Car has data like color and speed, and it also has behaviors like start, stop, or accelerate.

Since every car has these properties and behaviors, we can create a blueprint of a car and use it to create multiple car objects.

Real-World Analogy (Blueprint → Objects)

To understand OOP, imagine a blueprint of a car.

A blueprint describes what a car will look like and what features it will have.
But the blueprint itself is not a real car.

Using that blueprint, we can manufacture many cars.

Blueprint → Class
Actual cars → Objects

In programming, a class acts like the blueprint, and objects are the real instances created from that blueprint.

        Class (Blueprint)
            Car
   ┌──────────┼──────────┐
   │                │                │
  Car1             Car2              Car3
 Object           Object            Object

What is a Class in JavaScript

In many programming languages, a class is a built-in feature used to create objects. It is a core part of the language’s object-oriented system.

But JavaScript works a little differently.

In JavaScript, classes are mostly syntactic sugar over functions and prototypes.

Yes, this might sound surprising — it surprised me too 😅

Before ES6, JavaScript developers used constructor functions and prototypes to create objects and achieve OOP behavior.

When ES6 introduced the class keyword, it did not change the underlying mechanism.
It simply provided a cleaner and more readable syntax on top of the existing prototype-based system.

So internally, a JavaScript class is still a special type of function.

Example

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

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

Under the hood, this behaves very similarly to:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  console.log("Hello " + this.name);
};

So in JavaScript, classes are mainly syntactic sugar over constructor functions and prototypes, not a completely independent feature like in many other languages.

Creating Objects Using Classes

Objects are created using the new keyword.

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

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

Methods in a Class

Methods are functions inside a class that define the behavior of the objects created from that class.

They describe what an object can do.

For example, if we have a Car class, a car can start, stop, or drive.

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

  start() {
    console.log(this.brand + " car started")
  }
}

Here, start() is a method that can be used by every object created from the class.

Creating an object and calling the method:

const car1 = new Car("Toyota")

car1.start()

Constructor Method

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

It is used to initialize the object's properties.

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

Here, the constructor sets the color and brand when a car object is created.

Basic Idea of Encapsulation

Encapsulation means keeping data and the functions that operate on that data together inside a class.

Instead of writing data and logic separately, we wrap them inside an object.

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

  introduce() {
    console.log("My name is " + this.name)
  }
}

Here the data (name, age) and behavior (introduce) are inside the same class.

Extra Information 💡

By convention, class names are written in PascalCase (starting with a capital letter). This helps developers quickly recognize that it is a class and not a normal variable or function.

When a class is used with the new keyword, JavaScript performs several steps automatically.

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

const p1 = new Person("Rahul")

What happens internally:

1. A new empty object is created.

2. this inside the constructor points to that new object.

3. Properties are added to that object using this.

4. The new object is automatically returned.

Assignment

The best way to understand classes is to practice them yourself 💻

Try solving the exercise below.

Create a class called Student with:

Properties

• name

• age

Method

• printDetails() → prints the student’s name and age.

Conclusion

Object-Oriented Programming helps organize code in a way that is modular, reusable, and easier to maintain.

In JavaScript, classes provide a clean syntax to create objects and manage their data and behavior.

Understanding classes and objects is an important step toward building larger and more structured applications.

Thanks for your patience while reading this article.