Object-Oriented Programming (OOP) in JavaScript: A Complete Guide with Real-World Examples

Object-Oriented Programming (OOP) is one of the most widely used programming paradigms in modern software development. Whether you're building a simple web application or a large-scale enterprise system, understanding OOP will help you write cleaner, reusable, and maintainable code.

Why I Started Learning OOP

While building my projects, such as a Quiz Application and a Mobile Banking Application UI, I realized that organizing code becomes increasingly important as a project grows.

Initially, managing data and functionality with simple objects and functions seemed sufficient. However, as features increased, the code became harder to maintain and reuse.

This is where Object-Oriented Programming (OOP) concepts such as classes, inheritance, encapsulation, and polymorphism started making more sense to me. OOP provides a structured way to organize code, reduce duplication, and improve scalability.

In this article, I'll share what I've learned about OOP in JavaScript with practical examples that beginners can easily follow.

In JavaScript, OOP became much easier with the introduction of ES6 Classes. In this article, we'll explore the core concepts of OOP, including:

Classes
Objects
Constructors
Inheritance
super()
Encapsulation
Abstraction
Polymorphism
Getters and Setters
Real-world examples

Let's dive in.

What is Object-Oriented Programming?

Object-Oriented Programming is a programming paradigm that organizes code around objects rather than functions.

An object contains:

Properties (Data)
Methods (Behavior)

Think of a real-world car.

A car has:

Properties:

Brand
Color
Speed

Behaviors:

Start
Stop
Accelerate

In OOP, we represent such entities using classes and objects.

Class and Object

A class is a blueprint for creating objects.

Creating a Class

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

  start() {
    console.log(`${this.brand} is starting...`);
  }
}

Creating an Object

const car1 = new Car("Toyota", "Black");

console.log(car1.brand);

car1.start();

Output

Toyota
Toyota is starting...

Here:

Car is a class
car1 is an object

Understanding Constructors

A constructor is a special method that automatically runs when an object is created.

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
}

const user1 = new User(
  "Ratul",
  "ratul@gmail.com"
);

console.log(user1);

Output:

User {
  name: 'Ratul',
  email: 'ratul@gmail.com'
}

The constructor initializes the object's data.

Instance Methods

Methods define what an object can do.

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

  greet() {
    console.log(
      `Welcome ${this.name}`
    );
  }
}

const user = new User("Ratul");

user.greet();

Output:

Welcome Ratul

Inheritance

Inheritance allows one class to inherit properties and methods from another class.

This reduces code duplication.

Parent Class

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

  introduce() {
    console.log(
      `My name is ${this.name}`
    );
  }
}

Child Class

class Student extends Person {
  constructor(name, department) {
    super(name);

    this.department = department;
  }

  study() {
    console.log(
      `${this.name} studies ${this.department}`
    );
  }
}

Usage

const student = new Student(
  "Ratul",
  "Computer Science"
);

student.introduce();
student.study();

Output:

My name is Ratul
Ratul studies Computer Science

The Student class automatically inherits the introduce() method.

Understanding super()

The super() keyword is used to call the parent class constructor.

Example:

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name);

    this.breed = breed;
  }
}

const dog = new Dog(
  "Buddy",
  "Golden Retriever"
);

console.log(dog);

Output:

Dog {
  name: "Buddy",
  breed: "Golden Retriever"
}

Without super(), JavaScript will throw an error.

Encapsulation

Encapsulation means hiding internal data and exposing only necessary functionality.

Modern JavaScript provides private fields using #.

class BankAccount {
  #balance;

  constructor(balance) {
    this.#balance = balance;
  }

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

  getBalance() {
    return this.#balance;
  }
}

const account =
  new BankAccount(1000);

account.deposit(500);

console.log(
  account.getBalance()
);

Output:

Trying to access:

account.#balance

will produce an error because the field is private.

This protects sensitive data.

Abstraction

Abstraction means hiding implementation details and exposing only what's necessary.

Consider a coffee machine.

You press a button and get coffee.

You don't need to know:

How water heats up
How beans are processed
How pressure is generated

Similarly:

class CoffeeMachine {
  makeCoffee() {
    this.#boilWater();
    console.log(
      "Coffee is ready"
    );
  }

  #boilWater() {
    console.log(
      "Boiling water..."
    );
  }
}

const machine =
  new CoffeeMachine();

machine.makeCoffee();

Output:

Boiling water...
Coffee is ready

Users only interact with makeCoffee().

Polymorphism

Polymorphism means "many forms."

Different classes can implement the same method differently.

class Animal {
  speak() {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Bark");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Meow");
  }
}

const dog = new Dog();
const cat = new Cat();

dog.speak();
cat.speak();

Output:

Bark
Meow

The same method behaves differently depending on the object.

This is polymorphism.

Method Overriding

Overriding happens when a child class replaces a parent class method.

class User {
  login() {
    console.log(
      "User logged in"
    );
  }
}

class Admin extends User {
  login() {
    console.log(
      "Admin logged in"
    );
  }
}

const admin =
  new Admin();

admin.login();

Output:

Admin logged in

The child method overrides the parent method.

Getters and Setters

Getters and setters help control access to object properties.

class Product {
  constructor(price) {
    this.price = price;
  }

  get formattedPrice() {
    return `$${this.price}`;
  }

  set updatePrice(value) {
    this.price = value;
  }
}

const product =
  new Product(100);

console.log(
  product.formattedPrice
);

product.updatePrice = 150;

console.log(
  product.formattedPrice
);

Output:

$100
$150

Real-World Example: Employee Management System

Imagine you're building a company dashboard.

class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }

  getDetails() {
    console.log(
      `${this.name} earns $${this.salary}`
    );
  }
}

Developer Class:

class Developer extends Employee {
  constructor(
    name,
    salary,
    language
  ) {
    super(name, salary);

    this.language = language;
  }

  code() {
    console.log(
      `${this.name} develops applications using ${this.language}`
    );
  }
}

Manager Class:

class Manager extends Employee {
  constructor(
    name,
    salary,
    teamSize
  ) {
    super(name, salary);

    this.teamSize = teamSize;
  }

  manageTeam() {
    console.log(
      `${this.name} manages ${this.teamSize} employees`
    );
  }
}

Usage:

const dev =
  new Developer(
    "Ratul",
    5000,
    "JavaScript"
  );

const manager =
  new Manager(
    "John",
    8000,
    10
  );

dev.getDetails();
dev.code();

manager.getDetails();
manager.manageTeam();

Output:

Ratul earns $5000
Ratul develops applications using JavaScript

John earns $8000
John manages 10 employees

This is how OOP is commonly used in enterprise applications.

Why OOP Matters

Benefits of OOP:

✅ Code Reusability

✅ Better Organization

✅ Easier Maintenance

✅ Reduced Duplication

✅ Scalability

✅ Cleaner Architecture

When applications grow larger, OOP becomes increasingly valuable.

The Four Pillars of OOP

Every OOP language revolves around four major concepts:

Encapsulation
Abstraction
Inheritance
Polymorphism

Mastering these concepts will significantly improve your ability to design scalable applications.

Conclusion

Object-Oriented Programming is more than just classes and objects. It's a way of organizing code that makes applications easier to build, maintain, and scale.

In this article, we explored:

Classes
Objects
Constructors
Methods
Inheritance
super()
Encapsulation
Abstraction
Polymorphism
Getters and Setters
Real-world examples

As you continue learning JavaScript, try applying OOP concepts in your projects such as Quiz Apps, E-commerce Applications, Dashboard Systems, and Management Platforms. The more you practice, the more natural OOP will become.

Happy Coding! 🚀

推荐订阅源

DEV Community