menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:strategy pattern

menu

The Strategy Pattern is a behavioral design pattern that allows you to define a family of algorithms, encapsulate each one of them, and make them interchangeable.

It lets you choose the appropriate algorithm to use dynamically, based on specific conditions or requirements. This pattern promotes code reusability, maintainability, and flexibility by separating the behavior from the context that uses it.

Let's dive deep into implementing the Strategy Pattern in TypeScript:

Key Components:

  1. Context:

    • The Context class is responsible for maintaining a reference to a strategy object and using it.

    • It delegates the work to the strategy, without knowing the specific implementation.

  2. Strategy:

    • The Strategy interface defines a set of methods that encapsulate different algorithms.

    • Concrete strategies implement this interface to provide specific algorithm implementations.

  3. Concrete Strategy:

    • A Concrete Strategy is a class that implements the Strategy interface.

    • It provides a specific algorithm that can be used by the Context.

Implementation:

Here's an example of how to implement the Strategy Pattern in TypeScript:

javascript// Strategy interface
interface PaymentStrategy {
  pay(amount: number): void;
}

// Concrete Strategies
class CreditCardPayment implements PaymentStrategy {
  pay(amount: number): void {
    console.log(`Paid $${amount} with credit card.`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number): void {
    console.log(`Paid $${amount} with PayPal.`);
  }
}

class CashPayment implements PaymentStrategy {
  pay(amount: number): void {
    console.log(`Paid $${amount} in cash.`);
  }
}

// Context
class ShoppingCart {
  private paymentStrategy: PaymentStrategy;

  constructor(paymentStrategy: PaymentStrategy) {
    this.paymentStrategy = paymentStrategy;
  }

  checkout(amount: number): void {
    this.paymentStrategy.pay(amount);
  }
}

// Usage
const cart1 = new ShoppingCart(new CreditCardPayment());
cart1.checkout(100);

const cart2 = new ShoppingCart(new PayPalPayment());
cart2.checkout(50);

const cart3 = new ShoppingCart(new CashPayment());
cart3.checkout(30);

In this Strategy Pattern implementation:

  • PaymentStrategy is the strategy interface that defines the pay method.

  • CreditCardPayment, PayPalPayment, and CashPayment are concrete strategies that implement the PaymentStrategy interface, each providing a specific payment method.

  • ShoppingCart is the context that holds a reference to a payment strategy and delegates the payment operation to it.

  • The client code creates different shopping carts with various payment strategies and checks out with different amounts.

Benefits:

  • Allows you to add new algorithms without changing the existing code (Open/Closed Principle).

  • Separates the algorithms from the context, promoting reusability.

  • Provides a way to select algorithms dynamically at runtime.

The Strategy Pattern is widely used in scenarios where you need to switch between different algorithms or behaviors at runtime. It's particularly valuable in situations like payment processing, sorting algorithms, and user interface components where multiple strategies can be applied.

1280 x 720 px