OOP in JavaScript?

First Things First: What Is OOP, Really?

Forget "paradigm" and "abstraction layers." Let's keep it real, OOP is just grouping related stuff together like how life actually works.

Your coffee mug? It has properties (colour, size) and does things (holds coffee, gets warm). You don't store its colour in one drawer and its "hold-coffee" ability in another room. That'd be wild.

Code should feel the same.

The "Four Pillars" of OOP

Encapsulation = Keep Your Stuff in Your Lane

Your bank account balance isn't scribbled on a sticky note everyone can grab. You deposit or withdraw through the bank. this is how it looks in code -

class BankAccount {
  #balance = 0;  

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

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

Abstraction = Don't Sweat the Small Stuff

You drive a car. You press the gas pedal. You don't need to know about fuel injectors, piston timing, or transmission fluid. Thank goodness. Again lets see the code -

class PaymentProcessor {
  process(amount) {
    this.validate(amount);
    this.chargeCard(amount);
    this.sendReceipt();
  }


  validate(amount) { /* ... */ }
  chargeCard(amount) { /* ... */ }
}

// Using it:
processor.process(29.99);

You call process(29.99). Done. It just works.

Inheritance = Stand on Shoulders, Don't Reinvent

Your kid inherits your eye color and learns to ride a bike from you. They add their own flair.

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

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks!`);
  }
}

const buddy = new Dog("Buddy");
buddy.speak(); 

 // "Buddy barks!"

Polymorphism = Same Button, Different Magic

Press "play" on Netflix, show starts. Press "play" on Spotify, music flows. Same button. Smart behavior.

class Notification {
  send() {
    throw new Error("Subclasses must implement send()");
  }
}

class EmailNotification extends Notification {
  send() {
    console.log("Sending email...");
  }
}

class SMSNotification extends Notification {
  send() {
    console.log("Sending text...");
  }
}


function trigger(notification) {
  notification.send(); 
}

trigger(new EmailNotification()); 
trigger(new SMSNotification());

Add a new notification type tomorrow? Zero changes to trigger(). That's the flexibility it provides.

And the classic debate javascript isn’t really OOP, ahh . The truth is under the hood, prototypes are doing the heavy lifting. But since ES6, We get class syntax and it's quite readable.