Implementing the Strategy Pattern in JavaScript

Welcome back! We are continuing our journey through Behavioral Patterns in software design. In previous lessons, we explored the Command and Observer patterns, focusing on object communication and state changes. Now, we will learn how to implement the Strategy Pattern in JavaScript. We will break down the pattern into manageable parts and illustrate its practical application through a clear example.

Consider a scenario where you have a ShoppingCart class that can handle payments through different methods, such as credit cards or PayPal. Using the Strategy Pattern, we can encapsulate these payment methods into separate classes and have the ShoppingCart class use any of these strategies interchangeably.

First, we need to simulate an interface that all payment strategies will follow. In JavaScript, we do this by defining a common method that all payment strategy classes should implement.

class PaymentStrategy {
  pay(amount) {
    throw new Error("Method 'pay()' must be implemented.");
  }
}

In this snippet, we create a PaymentStrategy class that enforces the implementation of the pay method in any class extending it by checking in the constructor.

Next, we implement concrete strategies that encapsulate different payment methods. Here, we define two strategies: CreditCardStrategy and PayPalStrategy.

class CreditCardStrategy extends PaymentStrategy {
  constructor(cardNumber) {
    super();
    this.cardNumber = cardNumber;
  }

  pay(amount) {
    console.log(`Paid ${amount} using Credit Card: ${this.cardNumber}`);
  }
}

In the CreditCardStrategy class, we implement the pay method to handle credit card transactions. This class requires a card number upon initialization.

class PayPalStrategy extends PaymentStrategy {
  constructor(email) {
    super();
    this.email = email;
  }

  pay(amount) {
    console.log(`Paid ${amount} using PayPal: ${this.email}`);
  }
}

Similarly, the PayPalStrategy class implements the pay method for PayPal transactions. It requires an email address to initialize.

The ShoppingCart class is our context class that will use any given payment strategy. This class keeps a reference to a PaymentStrategy object and can switch strategies at runtime.

class ShoppingCart {
  constructor() {
    this.strategy = null;
  }

  setPaymentStrategy(strategy) {
    this.strategy = strategy;
  }

  checkout(amount) {
    if (this.strategy) {
      this.strategy.pay(amount);
    } else {
      console.log("No payment strategy set.");
    }
  }
}

In the ShoppingCart class, the setPaymentStrategy method allows us to set the payment strategy, and the checkout method uses the selected strategy to make a payment.