Strategy Method | JavaScript Design Pattern

Strategy Method or Strategy Pattern in JavaScript helps solve the problem of needing to use different methods or behaviors in your code and easily switch between them. Strategy Method is a behavioral design pattern in JavaScript that defines a family of algorithms, encapsulates each one, and makes them interchangeable. It allows the client to choose an algorithm from a family of algorithms at runtime, without altering the code that uses these algorithms.

Example of Strategy Method in JavaScript Design Patterns

The problem statement is essentially to create a flexible and extensible discount system for a shopping cart, allowing for different discount strategies to be easily added and applied to different shopping carts. This pattern is useful for scenarios where you want to decouple the discount logic from the shopping cart and make it easy to change or extend the discount strategies.

Key Component of Strategy Method:

• Context: This is the class or component that uses the Strategy. It maintains a reference to a Strategy object and can switch between different strategies at runtime.
• Strategy Interface: An interface or an abstract class that defines a set of methods that concrete strategies must implement.
• Concrete Strategies: These are the individual implementations of the Strategy Interface. They encapsulate specific algorithmic behaviors.

Step-by-step Implementation of the above Problem:

Strategy Interface: DiscountStrategy is an abstract class with a method calculateDiscount(orderTotal) that needs to be implemented by concrete discount strategies.

Javascript

// Strategy Interface
class DiscountStrategy {
  calculateDiscount(orderTotal) {
    // To be implemented by concrete strategies
  }
}

Concrete Strategies: There are three concrete discount strategies implemented in the code:

• NoDiscount: Provides no discount (returns 0).
• TenPercentDiscount: Applies a 10% discount on the order total.
• TwentyPercentDiscount: Applies a 20% discount on the order total.

Javascript

// Concrete Strategies
class NoDiscount extends DiscountStrategy {
  calculateDiscount(orderTotal) {
    return 0;
  }
}
class TenPercentDiscount extends DiscountStrategy {
  calculateDiscount(orderTotal) {
    return orderTotal * 0.1;
  }
}

class TwentyPercentDiscount extends DiscountStrategy {
  calculateDiscount(orderTotal) {
    return orderTotal * 0.2;
  }
}

Context: The ShoppingCart class represents the shopping cart and takes a discount strategy as a parameter during initialization. It allows items to be added to the cart and calculates the total order price, taking into account the selected discount strategy.

Javascript

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

  addItem(item) {
    this.items.push(item);
  }

  calculateTotal() {
    const orderTotal = this.items.reduce((total, item) => total + item.price, 0);
    return orderTotal - this.discountStrategy.calculateDiscount(orderTotal);
  }
}

Example Usage: Three different shopping carts (cart1, cart2, and cart3) are created with different discount strategies and items. The code calculates and prints the total price for each cart after applying the selected discount strategy.

Javascript

// Example usage
const noDiscount = new NoDiscount();
const tenPercentDiscount = new TenPercentDiscount();
const twentyPercentDiscount = new TwentyPercentDiscount();

const cart1 = new ShoppingCart(noDiscount);
cart1.addItem({ name: 'Item 1', price: 50 });
console.log('Cart 1 Total:', cart1.calculateTotal());

const cart2 = new ShoppingCart(tenPercentDiscount);
cart2.addItem({ name: 'Item 1', price: 50 });
console.log('Cart 2 Total:', cart2.calculateTotal());

const cart3 = new ShoppingCart(twentyPercentDiscount);
cart3.addItem({ name: 'Item 1', price: 50 });
console.log('Cart 3 Total:', cart3.calculateTotal());

Code Implementation of the above Problem:

Javascript

// Strategy Interface
class DiscountStrategy {
  calculateDiscount(orderTotal) {
    // To be implemented by concrete strategies
  }
}

// Concrete Strategies
class NoDiscount extends DiscountStrategy {
  calculateDiscount(orderTotal) {
    return 0;
  }
}

class TenPercentDiscount extends DiscountStrategy {
  calculateDiscount(orderTotal) {
    return orderTotal * 0.1;
  }
}

class TwentyPercentDiscount extends DiscountStrategy {
  calculateDiscount(orderTotal) {
    return orderTotal * 0.2;
  }
}

// Context
class ShoppingCart {
  constructor(discountStrategy) {
    this.discountStrategy = discountStrategy;
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  calculateTotal() {
    const orderTotal = this.items.reduce((total, item) => total + item.price, 0);
    return orderTotal - this.discountStrategy.calculateDiscount(orderTotal);
  }
}

// Example usage
const noDiscount = new NoDiscount();
const tenPercentDiscount = new TenPercentDiscount();
const twentyPercentDiscount = new TwentyPercentDiscount();

const cart1 = new ShoppingCart(noDiscount);
cart1.addItem({ name: 'Item 1', price: 50 });
console.log('Cart 1 Total:', cart1.calculateTotal());

const cart2 = new ShoppingCart(tenPercentDiscount);
cart2.addItem({ name: 'Item 1', price: 50 });
console.log('Cart 2 Total:', cart2.calculateTotal());

const cart3 = new ShoppingCart(twentyPercentDiscount);
cart3.addItem({ name: 'Item 1', price: 50 });
console.log('Cart 3 Total:', cart3.calculateTotal());

Output

Cart 1 Total: 50
Cart 2 Total: 45
Cart 3 Total: 40

Diagrammatic explanation of the Above Example

Lets understand the Diagram

1. Context: This represents the class that contains a reference to the Strategy interface. It is responsible for configuring and using the strategies. The “Context” class has a private instance variable called “strategy” that refers to the Strategy interface. It also contains a method “execute()” which delegates the work to the strategy object.
2. Strategy: This is an interface or an abstract class that defines the method “algorithm()”. It represents the common interface for all supported algorithms. Concrete strategy classes implement this interface.
3. ConcreteStrategy1, ConcreteStrategy2, …: These are the concrete classes that implement the Strategy interface. Each of these concrete classes encapsulates a specific algorithm. For instance, “ConcreteStrategy1” and “ConcreteStrategy2” represent two different algorithms. They both implement the “algorithm()” method defined in the Strategy interface.

The arrows in the diagram illustrate the relationships between the classes.

• The association between “Context” and “Strategy” shows that the “Context” class has a reference to the Strategy interface.
• The arrows pointing from the “Context” to the “ConcreteStrategy” classes indicate that the “Context” can use any of the concrete strategies interchangeably by switching the current strategy.
• The “execute()” method in the “Context” class is the entry point for using the strategies.

Overall, this structure allows the “Context” class to utilize different algorithms without being dependent on their specific implementations. It enables the client to switch between different algorithms easily at runtime, promoting flexibility and maintainability.

Use Cases of Strategy Method in JavaScript Design Patterns

• Algorithm Selection: It allows you to choose an algorithm at runtime, so that system can employ various algorithms interchangeably depending on specific needs. Sorting, searching, and other algorithmic operations frequently use this.
• Behavioral Variations: The Strategy pattern offers a tidy method to encapsulate each algorithm and switch them out as needed when you have a collection of related behaviours or algorithms that must change independently. Applications where various behaviours must be implemented based on specific conditions may find this helpful.
• Complex Decision-making Logic: It helps in avoiding complex conditional statements by encapsulating each condition or decision-making logic into its own strategy. This simplifies the code, making it more maintainable and easier to understand.
• Dynamic Runtime Behavior: The Strategy pattern allows you to change the behavior of an object dynamically at runtime, providing flexibility and adaptability to the system.

Advantages of the Strategy Method in JavaScript Design Patterns

• Flexibility: It allows for easy addition or modification of strategies without altering the client code.
• Isolation: We can isolate the specific implementation details of the algorithms from the client’s code.
• Reusability: Strategies can be reused across different contexts.
• Clean Code: Promotes a clean and modular design by separating the algorithm from the context.
• Maintainability: Encapsulating each algorithm or behavior within its own class, makes it easier to modify, test, and extend the codebase without affecting other parts of the code.
• Easy Testing: With the Strategy pattern, it becomes easier to test individual algorithms independently of the context.
• Run-time Switching: It is possible that application can switch the strategies at the run-time.

Disadvantages of the Strategy Method in JavaScript Design Patterns

• Increased Number of Classes: If there are many strategies, it can lead to a larger number of classes, which can be hard to manage.
• Creating Extra Objects: In most cases, the application configures the Context with the required Strategy object. Therefore, the application needs to create and maintain two objects in place of one.
• Awareness among clients: Difference between the strategies should be clear among the clients to able to select a best one for them.
• Complexity: Implementing the Strategy pattern can introduce additional classes and complexity into your code. Each strategy has its own class, and managing these classes can become complex for large systems.
• Increased Code Size: The additional classes and interfaces introduced by the Strategy pattern can lead to an increase in code size.

Conclusion

The Strategy Method is a powerful design pattern that facilitates dynamic algorithm selection at runtime, ensuring code flexibility and reusability. By separating algorithms from clients, it encourages clean, maintainable code that aligns with the Open/Closed Principle. Despite its benefits, it’s important to manage the potential complexity and increased class count, which may impact system architecture. Overall, the Strategy Method is valuable for encapsulating various behaviors and enabling algorithm interchangeability without client code modification, making it an effective approach for robust software development.