DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

6 1

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 };
Enter fullscreen mode Exit fullscreen mode

👉 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:

Build gen AI apps that run anywhere with MongoDB Atlas

Build gen AI apps that run anywhere with MongoDB Atlas

MongoDB Atlas bundles vector search and a flexible document model so developers can build, scale, and run gen AI apps without juggling multiple databases. From LLM to semantic search, Atlas streamlines AI architecture. Start free today.

Start Free

Top comments (6)

Collapse
 
artydev profile image
artydev

Very instructive :-)

Collapse
 
efpage profile image
Eckehard

What's the difference to inheritance?

Collapse
 
budgiewatts profile image
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.

Collapse
 
efpage profile image
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!

Thread Thread
 
nhannguyenuri profile image
Nhan Nguyen

Thanks for sharing 👏

Collapse
 
jangelodev profile image
João Angelo

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

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM apps—no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free

👋 Kindness is contagious

Explore this practical breakdown on DEV’s open platform, where developers from every background come together to push boundaries. No matter your experience, your viewpoint enriches the conversation.

Dropping a simple “thank you” or question in the comments goes a long way in supporting authors—your feedback helps ideas evolve.

At DEV, shared discovery drives progress and builds lasting bonds. If this post resonated, a quick nod of appreciation can make all the difference.

Okay