The Strategy pattern enables interchangeable algorithm implementations.

The Strategy Pattern is a behavioral design pattern that allows the selection of specific algorithm implementations at runtime. By encapsulating a series of algorithms, they can be made interchangeable, enabling algorithm variations to remain independent of the clients that use them. In JavaScript, this pattern is often used to dynamically switch business logic or algorithms, enhancing code flexibility and maintainability.

Core Idea of the Strategy Pattern

The essence of the Strategy Pattern lies in encapsulating algorithms into independent strategy classes rather than hardcoding them into client code. Each strategy class implements the same interface, and the client invokes the strategy through a context object without needing to know the implementation details. This decoupling allows algorithms to vary independently, and adding or modifying strategies does not affect other code.

For example, the discount calculation logic of an e-commerce platform may change frequently due to promotional activities. Hardcoding each discount would lead to bloated and hard-to-maintain code. Using the Strategy Pattern, each discount algorithm can be encapsulated as an independent strategy:

// Strategy interface
class DiscountStrategy {
  calculate(price) {
    throw new Error("The calculate method must be implemented");
  }
}

// Concrete strategy: No discount
class NoDiscount extends DiscountStrategy {
  calculate(price) {
    return price;
  }
}

// Concrete strategy: Fixed discount
class FixedDiscount extends DiscountStrategy {
  constructor(discountAmount) {
    super();
    this.discountAmount = discountAmount;
  }

  calculate(price) {
    return price - this.discountAmount;
  }
}

// Concrete strategy: Percentage discount
class PercentageDiscount extends DiscountStrategy {
  constructor(percentage) {
    super();
    this.percentage = percentage;
  }

  calculate(price) {
    return price * (1 - this.percentage / 100);
  }
}

Implementation of the Context Role

The Context is a key role in the Strategy Pattern. It holds a reference to the concrete strategy and provides methods to switch strategies. The Context typically does not implement the algorithm directly but delegates it to the current strategy:

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

  setDiscountStrategy(strategy) {
    this.discountStrategy = strategy;
  }

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

  calculateTotal() {
    const subtotal = this.items.reduce((sum, item) => sum + item.price, 0);
    return this.discountStrategy.calculate(subtotal);
  }
}

// Usage example
const cart = new ShoppingCart();
cart.addItem({ name: "Product A", price: 100 });
cart.addItem({ name: "Product B", price: 200 });

// Apply no discount
console.log(cart.calculateTotal()); // Output: 300

// Switch to fixed discount strategy
cart.setDiscountStrategy(new FixedDiscount(50));
console.log(cart.calculateTotal()); // Output: 250

// Switch to percentage discount strategy
cart.setDiscountStrategy(new PercentageDiscount(10));
console.log(cart.calculateTotal()); // Output: 270

Dynamic Switching Advantage of the Strategy Pattern

The most notable advantage of the Strategy Pattern is the ability to switch algorithms at runtime. This is particularly useful when behavior needs to change based on user input, environment configuration, or business rules. For example, a data visualization tool might support multiple chart rendering algorithms:

class ChartRenderer {
  constructor(strategy) {
    this.renderStrategy = strategy;
  }

  setRenderStrategy(strategy) {
    this.renderStrategy = strategy;
  }

  render(data) {
    return this.renderStrategy.execute(data);
  }
}

// Bar chart rendering strategy
class BarChartStrategy {
  execute(data) {
    console.log(`Rendering bar chart: ${JSON.stringify(data)}`);
    // Actual rendering logic...
  }
}

// Line chart rendering strategy
class LineChartStrategy {
  execute(data) {
    console.log(`Rendering line chart: ${JSON.stringify(data)}`);
    // Actual rendering logic...
  }
}

// Usage example
const data = [10, 20, 30];
const renderer = new ChartRenderer(new BarChartStrategy());
renderer.render(data); // Output: Rendering bar chart...

// Dynamically switch to line chart
renderer.setRenderStrategy(new LineChartStrategy());
renderer.render(data); // Output: Rendering line chart...

Comparison Between Strategy Pattern and Conditional Statements

Traditional implementations might use conditional statements to switch between different algorithms, but this leads to hard-to-maintain code:

// Not recommended implementation
function calculateDiscount(type, price) {
  if (type === "fixed") {
    return price - 10;
  } else if (type === "percentage") {
    return price * 0.9;
  } else {
    return price;
  }
}

The Strategy Pattern eliminates these conditional branches by encapsulating each algorithm in a separate class. When adding a new discount type, you only need to add a new strategy class without modifying existing code:

// New strategy: Threshold discount
class ThresholdDiscount extends DiscountStrategy {
  constructor(threshold, discount) {
    super();
    this.threshold = threshold;
    this.discount = discount;
  }

  calculate(price) {
    return price >= this.threshold ? price - this.discount : price;
  }
}

// Using the new strategy without modifying the context
cart.setDiscountStrategy(new ThresholdDiscount(200, 30));
console.log(cart.calculateTotal()); // Automatically applies threshold discount based on total price

Advanced Usage: Strategy Composition

In complex scenarios, strategies can be combined. For example, implementing a composite discount strategy that applies multiple discounts sequentially:

class CompositeDiscount extends DiscountStrategy {
  constructor(strategies = []) {
    super();
    this.strategies = strategies;
  }

  calculate(price) {
    return this.strategies.reduce((currentPrice, strategy) => {
      return strategy.calculate(currentPrice);
    }, price);
  }
}

// Combining fixed and percentage discounts
const compositeStrategy = new CompositeDiscount([
  new FixedDiscount(20),
  new PercentageDiscount(5)
]);

cart.setDiscountStrategy(compositeStrategy);
console.log(cart.calculateTotal()); // First subtracts 20, then 5%

Application of Strategy Pattern in Form Validation

Form validation is a classic use case for the Strategy Pattern. Different fields may require different validation rules, and these rules may change frequently:

// Validation strategy interface
class ValidationStrategy {
  validate(value) {
    throw new Error("The validate method must be implemented");
  }
}

// Required field validation
class RequiredValidation extends ValidationStrategy {
  validate(value) {
    return value.trim() !== "";
  }
}

// Minimum length validation
class MinLengthValidation extends ValidationStrategy {
  constructor(minLength) {
    super();
    this.minLength = minLength;
  }

  validate(value) {
    return value.length >= this.minLength;
  }
}

// Pattern validation
class PatternValidation extends ValidationStrategy {
  constructor(pattern) {
    super();
    this.pattern = pattern;
  }

  validate(value) {
    return this.pattern.test(value);
  }
}

// Form field class
class FormField {
  constructor(validations = []) {
    this.validations = validations;
    this.value = "";
  }

  setValue(value) {
    this.value = value;
  }

  isValid() {
    return this.validations.every(validation => 
      validation.validate(this.value)
    );
  }
}

// Usage example
const usernameField = new FormField([
  new RequiredValidation(),
  new MinLengthValidation(4),
  new PatternValidation(/^[a-zA-Z0-9_]+$/)
]);

usernameField.setValue("user1");
console.log(usernameField.isValid()); // true

usernameField.setValue("u$");
console.log(usernameField.isValid()); // false

Performance Considerations for the Strategy Pattern

While the Strategy Pattern offers flexibility, in performance-sensitive scenarios, the overhead of creating strategy objects must be considered. For frequently called algorithms, the following optimizations can be applied:

1. Strategy Object Reuse: Create a pool of strategy objects to avoid repeated instantiation.
2. Functional Strategies: In JavaScript, functions can be used directly as simple strategies.

// Functional strategy implementation
const discountStrategies = {
  none: price => price,
  fixed: amount => price => price - amount,
  percentage: percent => price => price * (1 - percent / 100)
};

// Using functional strategies
const applyDiscount = (strategy, price) => strategy(price);

const fixed50 = discountStrategies.fixed(50);
console.log(applyDiscount(fixed50, 200)); // 150

Comparison Between Strategy Pattern and State Pattern

The Strategy Pattern and State Pattern are structurally similar but differ in intent:

• Strategy Pattern: Algorithm selection is active, determined by the client.
• State Pattern: State transitions are passive, triggered by internal conditions.

For example, a document editor might use both patterns:

// Strategy Pattern: Choosing different export formats
class ExportStrategy {
  export(document) {
    throw new Error("The export method must be implemented");
  }
}

// State Pattern: Restricting operations based on document state
class DocumentState {
  edit() {
    throw new Error("Editing is not allowed in the current state");
  }
}