Master OOP in JavaScript and Instantly Level Up Your Code

Object-Oriented Programming (OOP) is a programming paradigm built around the concept of "objects" — reusable pieces of code that bundle together data and behavior. While JavaScript is known for its flexibility and support for multiple paradigms, its object-oriented features have grown significantly over time, especially with the introduction of ES6 classes.

In this article, we’ll explore how OOP works in JavaScript, why it matters, and how you can apply it in real-world development.

What is OOP?

At its core, OOP is about modeling software using objects. Each object can represent a real-world entity, containing both:

Properties (data/state)
Methods (functions/behavior)

The four main principles of OOP are:

Encapsulation: Keeping data and related behavior bundled together.
Abstraction: Hiding complex implementation details and showing only the necessary parts.
Inheritance: Creating new classes from existing ones to reuse code.
Polymorphism: Using a common interface to interact with different underlying forms (objects).

How JavaScript Implements OOP

Unlike classical OOP languages like Java or C++, JavaScript is prototype-based. However, with ES6, JavaScript introduced the class syntax, which made OOP feel more familiar and accessible.

1. Creating a Class

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

  greet() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 25);
person1.greet(); // Output: Hi, my name is Alice and I'm 25 years old.

2. Inheritance

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const student1 = new Student("Bob", 20, "12th");
student1.greet();  // Inherited method
student1.study();  // New method

3. Encapsulation and Private Fields

With modern JavaScript, you can use private class fields using the # symbol:

class BankAccount {
  #balance = 0;

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

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

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance()); // 100

Attempting to access #balance directly from outside the class will result in an error, which helps enforce encapsulation.

4. Polymorphism

Polymorphism is often implemented using method overriding. Here's a basic example:

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

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

const myDog = new Dog();
myDog.speak(); // Output: Dog barks

Even though myDog is an instance of Dog, we can treat it as an Animal and call speak. The overridden method will still run, demonstrating polymorphism.

When to Use OOP in JavaScript

OOP is helpful when you're building applications that need:

A clear and reusable structure (like user, product, and order objects)
Complex data relationships
Encapsulation of logic and data
Scalable code organization, especially in large front-end or back-end apps

However, it’s not always necessary. JavaScript’s functional programming capabilities are strong, and in some scenarios, functions and closures might be a better fit.

Conclusion

Object-Oriented Programming brings a powerful set of tools for organizing and structuring your code in JavaScript. Understanding how to create and extend classes, encapsulate data, and use polymorphism will help you write more maintainable and flexible applications.

While JavaScript gives you multiple ways to solve problems, mastering OOP is a valuable skill that pays off, especially as your projects grow in complexity.

DEV Community