JavaScript Design Patterns - Structural - Decorator

Decorator is a structural design pattern that allows us to attach new behaviors to objects by placing them inside special wrapper objects containing them.

In the example below, we use a decorator to extend behavior in Facebook Notifications.

class Notification {
  constructor(kind) {
    this.kind = kind || "Generic";
  }

  getInfo() {
    return `I'm a ${this.kind} Notification`;
  }
}

class FacebookNotification extends Notification {
  constructor() {
    super("Facebook");
  }

  setNotification(msg) {
    this.message = msg;
  }

  getInfo() {
    return `${super.getInfo()} with the message: ${this.message}`;
  }
}

class SMSNotification extends Notification {
  constructor() {
    super("SMS");
  }

  getInfo() {
    return super.getInfo();
  }
}

export { FacebookNotification, SMSNotification };

👉 Use this pattern when adding extensions to an object in runtime without affecting other objects.

---

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Comments

[Eckehard]

What's the difference to inheritance?

[John Watts]

You can use the same decorator to provide the same functionality to multiple classes if they implement a common interface without having to extend all of those classes for what might be a niche use case.

[Eckehard]

If you need the same functionality in multiple classes it´s a sign your hierarchy needs some update. You should implement common functions in a parent class, not again and again in the childs using decorators.

That´s OOP bottom-up!

[Nhan Nguyen]

Thanks for sharing 👏

[artydev]

Very instructive :-)

[João Angelo]

Hi Nhan Nguyen,
Your tips are very useful
Thanks for sharing