Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming in JavaScript

Updated
3 min read

Object-Oriented Programming (OOP) is one of the most important concepts in programming. It focuses on organizing code into objects and classes, where related variables and functions are grouped together.

In simple terms, OOP means grouping related data and functions together in a single structure.

OOP is based on four important concepts:

  • Abstraction

  • Encapsulation

  • Polymorphism

  • Inheritance

Abstraction

Abstraction means exposing only the necessary details to the user while hiding the internal implementation.

For example, in a food delivery app, users only see the "Order" button and the menu, but they do not see the backend logic that processes the order.

Encapsulation

Encapsulation means binding data (variables) and methods (functions) together into a single unit, just like a capsule.

Polymorphism

Polymorphism means one entity can have multiple forms.

Polymorphism mainly includes two concepts:

Function Overloading

In some languages, function overloading allows multiple functions with the same name but different parameters. JavaScript does not support traditional function overloading, but similar behavior can be achieved using conditional logic inside a function.

Function Overriding

Function overriding happens when a child class provides its own implementation of a method that already exists in the parent class.

Understanding OOP with a Toy Factory Example

Suppose a toy-making company wants to manufacture an Iron Man toy.

Before producing the toys, they need a blueprint that describes:

  • Toy color

  • Toy size

  • Other specifications

Using this blueprint, they can create multiple toys.

In JavaScript, a class acts as a blueprint for creating objects.


class IronMan {
  constructor(color, size) {
    this._color = color;
    this._size = size;
  }

  getDetails() {
    return {
      color: this._color,
      size: this._size
    };
  }
}

const newToy = new IronMan("red", 4);

console.log(newToy.getDetails())

Output:

{ color: "red", size: 4 }

The underscore (_) is often used as a convention to indicate that a property is intended to be private.

What is a Constructor?

A constructor is a special method inside a class that is automatically called when a new object is created.

It is used to initialize object properties.

Example:

const toy1 = new IronMan("red", 4);
const toy2 = new IronMan("blue", 5);

Here we created two objects using the same class blueprint.

Class vs Object

Class → Blueprint used to create objects
Object → Instance created using the class

Example:

class Car {}  // blueprint

const myCar = new Car(); // object

Inheritance

Inheritance means one class can inherit properties and methods from another class using the extends keyword.

class HeroToy extends IronMan {
  constructor(color, size, weapon) {
    super(color, size);
    this.weapon = weapon;
  }
}

const heroToy = new HeroToy("red", 4, "laser");

console.log(heroToy);

This helps reuse code and build relationships between classes.

The super() keyword is used to call the constructor of the parent class so that the child class can inherit its properties.

Conclusion

Object-Oriented Programming helps developers write organized, reusable, and maintainable code. By understanding the four core principles — abstraction, encapsulation, polymorphism, and inheritance — developers can design scalable applications in JavaScript.

Learning OOP is an important step toward becoming a better software developer.