DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

2

JavaScript Design Patterns - Behavioral - Chain of Responsibility

The chain of responsibility pattern allows passing requests along a chain of objects that have a chance to handle the request.

Upon receiving a request, each handler decides whether to process it or pass it on to the next handler in the chain.

In the example below, we are chaining the class discount to handle the request for how much the discount in a shopping cart is.

class ShoppingCart {
  constructor() {
    this.products = [];
  }

  addProduct(p) {
    this.products.push(p);
  }
}

class Discount {
  calc(products) {
    let ndiscount = new NumberDiscount();
    let pdiscount = new PriceDiscount();
    let none = new NoneDiscount();
    ndiscount.setNext(pdiscount);
    pdiscount.setNext(none);

    return ndiscount.exec(products);
  }
}

class NumberDiscount {
  constructor() {
    this.next = null;
  }

  setNext(fn) {
    this.next = fn;
  }

  exec(products) {
    let result = 0;
    if (products.length > 3) result = 0.05;

    return result + this.next.exec(products);
  }
}

class PriceDiscount {
  constructor() {
    this.next = null;
  }

  setNext(fn) {
    this.next = fn;
  }

  exec(products) {
    let result = 0;
    let total = products.reduce((a, b) => (a + b), 0);

    if (total >= 500) result = 0.1;

    return result + this.next.exec(products);
  }
}

class NoneDiscount {
  exec() {
    return 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Use this pattern when more than one object can handle a request and that information is known in runtime.

A complete example is here ๐Ÿ‘‰ https://stackblitz.com/edit/vitejs-vite-ekmecn?file=main.js


I hope you found it helpful. Thanks for reading. ๐Ÿ™

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

Warp.dev image

The best coding agent. Backed by benchmarks.

Warp outperforms every other coding agent on the market, and gives you full control over which model you use. Get started now for free, or upgrade and unlock 2.5x AI credits on Warp's paid plans.

Download Warp

Top comments (0)

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarklyโ€™s MCP server ๐Ÿ

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

๐Ÿ‘‹ Kindness is contagious

If this **helped, please leave a โค๏ธ or a friendly comment!

Okay