📘 Strategy Pattern: Algorithm Selection

🎯 Introduction

Welcome to this exciting tutorial on the Strategy Pattern! 🎉 In this guide, we’ll explore how this powerful design pattern can make your code more flexible and maintainable by allowing you to swap algorithms at runtime.

You’ll discover how the Strategy Pattern can transform your TypeScript development experience. Whether you’re building payment systems 💳, sorting algorithms 📊, or game AI 🎮, understanding this pattern is essential for writing robust, extensible code.

By the end of this tutorial, you’ll feel confident using the Strategy Pattern in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding Strategy Pattern

🤔 What is the Strategy Pattern?

The Strategy Pattern is like having a Swiss Army knife 🔧 where you can swap out different tools based on what you need. Think of it as a restaurant menu 🍽️ where you can choose different cooking methods (grilled, fried, steamed) for the same dish!

In TypeScript terms, the Strategy Pattern lets you define a family of algorithms, encapsulate each one, and make them interchangeable. This means you can:

✨ Switch algorithms at runtime
🚀 Add new strategies without changing existing code
🛡️ Keep your code clean and maintainable

💡 Why Use the Strategy Pattern?

Here’s why developers love the Strategy Pattern:

Flexibility 🔄: Change behavior without modifying client code
Open/Closed Principle 📖: Open for extension, closed for modification
Testability 🧪: Each strategy can be tested independently
Code Reusability ♻️: Strategies can be shared across different contexts

Real-world example: Imagine building an e-commerce platform 🛒. With the Strategy Pattern, you can easily switch between different shipping methods, payment processors, or discount calculations!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 👋 Hello, Strategy Pattern!
interface PaymentStrategy {
  pay(amount: number): void;
  getProcessingFee(): number;
}

// 💳 Credit card payment strategy
class CreditCardPayment implements PaymentStrategy {
  constructor(private cardNumber: string) {}
  
  pay(amount: number): void {
    console.log(`💳 Paid $${amount} using credit card ending in ${this.cardNumber.slice(-4)}`);
  }
  
  getProcessingFee(): number {
    return 2.5; // 2.5% fee
  }
}

// 📱 PayPal payment strategy
class PayPalPayment implements PaymentStrategy {
  constructor(private email: string) {}
  
  pay(amount: number): void {
    console.log(`📱 Paid $${amount} using PayPal account ${this.email}`);
  }
  
  getProcessingFee(): number {
    return 3.0; // 3% fee
  }
}

// 🛒 Shopping cart that uses strategies
class ShoppingCart {
  private paymentStrategy: PaymentStrategy | null = null;
  
  setPaymentStrategy(strategy: PaymentStrategy): void {
    this.paymentStrategy = strategy;
    console.log("✅ Payment method selected!");
  }
  
  checkout(amount: number): void {
    if (!this.paymentStrategy) {
      console.log("❌ Please select a payment method first!");
      return;
    }
    
    const fee = this.paymentStrategy.getProcessingFee();
    const total = amount + (amount * fee / 100);
    console.log(`💰 Subtotal: $${amount}, Fee: ${fee}%, Total: $${total.toFixed(2)}`);
    this.paymentStrategy.pay(total);
  }
}

💡 Explanation: Notice how we can swap payment methods without changing the ShoppingCart class! The ? makes properties optional for flexibility.

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Strategy with context
interface SortStrategy<T> {
  sort(data: T[]): T[];
  getName(): string;
}

class QuickSort<T> implements SortStrategy<T> {
  sort(data: T[]): T[] {
    // 🚀 Quick sort implementation
    return [...data].sort();
  }
  
  getName(): string {
    return "Quick Sort ⚡";
  }
}

// 🎨 Pattern 2: Strategy factory
class StrategyFactory {
  private strategies = new Map<string, PaymentStrategy>();
  
  registerStrategy(name: string, strategy: PaymentStrategy): void {
    this.strategies.set(name, strategy);
    console.log(`✅ Registered ${name} strategy`);
  }
  
  getStrategy(name: string): PaymentStrategy | undefined {
    return this.strategies.get(name);
  }
}

// 🔄 Pattern 3: Strategy with state
interface CompressionStrategy {
  compress(data: string): string;
  decompress(data: string): string;
  getCompressionRatio(): number;
}

💡 Practical Examples

🛒 Example 1: Dynamic Pricing Calculator

Let’s build something real:

// 🏷️ Define our pricing strategy interface
interface PricingStrategy {
  calculatePrice(basePrice: number, quantity: number): number;
  getDescription(): string;
}

// 🎯 Regular pricing
class RegularPricing implements PricingStrategy {
  calculatePrice(basePrice: number, quantity: number): number {
    return basePrice * quantity;
  }
  
  getDescription(): string {
    return "Regular pricing 🏷️";
  }
}

// 🎉 Bulk discount pricing
class BulkDiscountPricing implements PricingStrategy {
  constructor(
    private minQuantity: number,
    private discountPercentage: number
  ) {}
  
  calculatePrice(basePrice: number, quantity: number): number {
    if (quantity >= this.minQuantity) {
      const discount = basePrice * quantity * (this.discountPercentage / 100);
      return basePrice * quantity - discount;
    }
    return basePrice * quantity;
  }
  
  getDescription(): string {
    return `Bulk discount: ${this.discountPercentage}% off for ${this.minQuantity}+ items 🎊`;
  }
}

// 🌟 VIP member pricing
class VIPPricing implements PricingStrategy {
  private vipDiscount = 20; // 20% off for VIPs
  
  calculatePrice(basePrice: number, quantity: number): number {
    const subtotal = basePrice * quantity;
    return subtotal * (1 - this.vipDiscount / 100);
  }
  
  getDescription(): string {
    return `VIP pricing: ${this.vipDiscount}% off everything! 👑`;
  }
}

// 🛍️ Product with dynamic pricing
class Product {
  constructor(
    public name: string,
    public basePrice: number,
    public emoji: string,
    private pricingStrategy: PricingStrategy = new RegularPricing()
  ) {}
  
  // 🔄 Change pricing strategy
  setPricingStrategy(strategy: PricingStrategy): void {
    this.pricingStrategy = strategy;
    console.log(`${this.emoji} ${this.name} now uses: ${strategy.getDescription()}`);
  }
  
  // 💰 Calculate final price
  getPrice(quantity: number): number {
    return this.pricingStrategy.calculatePrice(this.basePrice, quantity);
  }
  
  // 📋 Show price breakdown
  showPricing(quantity: number): void {
    const price = this.getPrice(quantity);
    console.log(`${this.emoji} ${this.name} x${quantity}: $${price.toFixed(2)}`);
    console.log(`   Strategy: ${this.pricingStrategy.getDescription()}`);
  }
}

// 🎮 Let's use it!
const laptop = new Product("Gaming Laptop", 999.99, "💻");
laptop.showPricing(1); // Regular price

// Apply bulk discount
laptop.setPricingStrategy(new BulkDiscountPricing(3, 15));
laptop.showPricing(5); // Bulk discount applied!

// VIP customer arrives
laptop.setPricingStrategy(new VIPPricing());
laptop.showPricing(1); // VIP discount!

🎯 Try it yourself: Add a SeasonalPricing strategy that applies different discounts based on the current season!

🎮 Example 2: Game AI Movement Strategies

Let’s make it fun:

// 🏃 Movement strategy interface
interface MovementStrategy {
  move(currentPosition: { x: number; y: number }): { x: number; y: number };
  getMovementType(): string;
  getSpeedMultiplier(): number;
}

// 🐌 Cautious movement
class CautiousMovement implements MovementStrategy {
  move(currentPosition: { x: number; y: number }): { x: number; y: number } {
    // Move slowly and carefully
    const moveDistance = 1;
    return {
      x: currentPosition.x + (Math.random() > 0.5 ? moveDistance : -moveDistance),
      y: currentPosition.y + (Math.random() > 0.5 ? moveDistance : -moveDistance)
    };
  }
  
  getMovementType(): string {
    return "Cautious 🐌";
  }
  
  getSpeedMultiplier(): number {
    return 0.5;
  }
}

// 🏃‍♂️ Aggressive movement
class AggressiveMovement implements MovementStrategy {
  constructor(private targetPosition: { x: number; y: number }) {}
  
  move(currentPosition: { x: number; y: number }): { x: number; y: number } {
    // Move directly toward target
    const dx = this.targetPosition.x - currentPosition.x;
    const dy = this.targetPosition.y - currentPosition.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    if (distance > 0) {
      const moveDistance = 3;
      return {
        x: currentPosition.x + (dx / distance) * moveDistance,
        y: currentPosition.y + (dy / distance) * moveDistance
      };
    }
    return currentPosition;
  }
  
  getMovementType(): string {
    return "Aggressive 🏃‍♂️";
  }
  
  getSpeedMultiplier(): number {
    return 1.5;
  }
}

// 🌀 Random movement
class RandomMovement implements MovementStrategy {
  move(currentPosition: { x: number; y: number }): { x: number; y: number } {
    const angle = Math.random() * Math.PI * 2;
    const distance = 2;
    return {
      x: currentPosition.x + Math.cos(angle) * distance,
      y: currentPosition.y + Math.sin(angle) * distance
    };
  }
  
  getMovementType(): string {
    return "Random 🌀";
  }
  
  getSpeedMultiplier(): number {
    return 1.0;
  }
}

// 🎮 Game character
class GameCharacter {
  private position = { x: 0, y: 0 };
  private movementStrategy: MovementStrategy;
  
  constructor(
    public name: string,
    public emoji: string,
    strategy: MovementStrategy = new CautiousMovement()
  ) {
    this.movementStrategy = strategy;
  }
  
  // 🔄 Change movement behavior
  setMovementStrategy(strategy: MovementStrategy): void {
    this.movementStrategy = strategy;
    console.log(`${this.emoji} ${this.name} switched to ${strategy.getMovementType()} movement!`);
  }
  
  // 🏃 Move the character
  move(): void {
    const oldPos = { ...this.position };
    this.position = this.movementStrategy.move(this.position);
    const speed = this.movementStrategy.getSpeedMultiplier();
    
    console.log(`${this.emoji} moved from (${oldPos.x.toFixed(1)}, ${oldPos.y.toFixed(1)}) to (${this.position.x.toFixed(1)}, ${this.position.y.toFixed(1)}) [Speed: ${speed}x]`);
  }
  
  // 📍 Get current position
  getPosition(): { x: number; y: number } {
    return { ...this.position };
  }
}

// 🎮 Let's play!
const player = new GameCharacter("Hero", "🦸");
const enemy = new GameCharacter("Monster", "👾");

// Enemy sees player and becomes aggressive!
enemy.setMovementStrategy(new AggressiveMovement(player.getPosition()));
enemy.move();

// Player gets scared and moves randomly
player.setMovementStrategy(new RandomMovement());
player.move();

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Strategy with Type Parameters

When you’re ready to level up, try this advanced pattern:

// 🎯 Generic strategy interface
interface DataProcessor<TInput, TOutput> {
  process(data: TInput): TOutput;
  validate(data: TInput): boolean;
  getName(): string;
}

// 🪄 JSON processor
class JSONProcessor implements DataProcessor<string, object> {
  process(data: string): object {
    try {
      return JSON.parse(data);
    } catch {
      return { error: "Invalid JSON ❌" };
    }
  }
  
  validate(data: string): boolean {
    try {
      JSON.parse(data);
      return true;
    } catch {
      return false;
    }
  }
  
  getName(): string {
    return "JSON Processor 📋";
  }
}

// ✨ CSV processor
class CSVProcessor implements DataProcessor<string, string[][]> {
  constructor(private delimiter: string = ",") {}
  
  process(data: string): string[][] {
    return data.split("\n").map(row => row.split(this.delimiter));
  }
  
  validate(data: string): boolean {
    return data.includes(this.delimiter);
  }
  
  getName(): string {
    return `CSV Processor (${this.delimiter}) 📊`;
  }
}

// 🚀 Strategy context with generics
class DataPipeline<TInput, TOutput> {
  constructor(private processor: DataProcessor<TInput, TOutput>) {}
  
  setProcessor(processor: DataProcessor<TInput, TOutput>): void {
    this.processor = processor;
    console.log(`✨ Switched to ${processor.getName()}`);
  }
  
  execute(data: TInput): TOutput | null {
    if (!this.processor.validate(data)) {
      console.log("❌ Validation failed!");
      return null;
    }
    
    console.log(`🔄 Processing with ${this.processor.getName()}`);
    return this.processor.process(data);
  }
}

🏗️ Advanced Topic 2: Composite Strategies

For the brave developers:

// 🚀 Composable strategies
interface ValidationStrategy {
  validate(value: string): boolean;
  getErrorMessage(): string;
}

// 📧 Email validation
class EmailValidation implements ValidationStrategy {
  validate(value: string): boolean {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  }
  
  getErrorMessage(): string {
    return "Invalid email address 📧";
  }
}

// 🔢 Length validation
class LengthValidation implements ValidationStrategy {
  constructor(private minLength: number, private maxLength: number) {}
  
  validate(value: string): boolean {
    return value.length >= this.minLength && value.length <= this.maxLength;
  }
  
  getErrorMessage(): string {
    return `Length must be between ${this.minLength} and ${this.maxLength} 📏`;
  }
}

// 🎯 Composite validator
class CompositeValidator implements ValidationStrategy {
  private strategies: ValidationStrategy[] = [];
  
  addStrategy(strategy: ValidationStrategy): void {
    this.strategies.push(strategy);
  }
  
  validate(value: string): boolean {
    return this.strategies.every(strategy => strategy.validate(value));
  }
  
  getErrorMessage(): string {
    const errors = this.strategies
      .filter(strategy => !strategy.validate(""))
      .map(strategy => strategy.getErrorMessage());
    return errors.join(", ");
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting to Set Strategy

// ❌ Wrong way - no default strategy!
class PaymentProcessor {
  private strategy: PaymentStrategy | undefined;
  
  process(amount: number): void {
    this.strategy!.pay(amount); // 💥 Runtime error if strategy not set!
  }
}

// ✅ Correct way - always have a default!
class PaymentProcessor {
  private strategy: PaymentStrategy;
  
  constructor(defaultStrategy: PaymentStrategy = new CreditCardPayment("default")) {
    this.strategy = defaultStrategy;
  }
  
  process(amount: number): void {
    this.strategy.pay(amount); // ✅ Always safe!
  }
}

🤯 Pitfall 2: Strategy State Management

// ❌ Dangerous - shared mutable state!
class BadStrategy {
  private count = 0; // Shared state is dangerous!
  
  execute(): void {
    this.count++; // 💥 Multiple contexts will conflict!
  }
}

// ✅ Safe - stateless or context-specific state!
class GoodStrategy {
  execute(context: { count: number }): void {
    context.count++; // ✅ State belongs to context!
  }
}

🛠️ Best Practices

🎯 Keep Strategies Focused: Each strategy should do one thing well
📝 Use Descriptive Names: QuickSortStrategy not QS
🛡️ Make Strategies Stateless: Avoid internal state when possible
🎨 Provide Factory Methods: Make strategy creation easy
✨ Document Strategy Behavior: Clear docs for each algorithm

🧪 Hands-On Exercise

🎯 Challenge: Build a Notification System

Create a flexible notification system:

📋 Requirements:

✅ Multiple notification channels (Email, SMS, Push)
🏷️ Priority levels affecting delivery method
👤 User preferences for notification types
📅 Time-based strategy selection (quiet hours)
🎨 Each notification needs an emoji!

🚀 Bonus Points:

Add retry logic for failed notifications
Implement notification batching
Create a notification history tracker

💡 Solution

🔍 Click to see solution

// 🎯 Our notification strategy system!
interface NotificationStrategy {
  send(message: string, recipient: string): Promise<boolean>;
  getChannel(): string;
  getPriority(): number;
}

// 📧 Email notification
class EmailNotification implements NotificationStrategy {
  async send(message: string, recipient: string): Promise<boolean> {
    console.log(`📧 Sending email to ${recipient}: ${message}`);
    // Simulate async operation
    await new Promise(resolve => setTimeout(resolve, 1000));
    return true;
  }
  
  getChannel(): string {
    return "Email 📧";
  }
  
  getPriority(): number {
    return 1; // Lowest priority
  }
}

// 📱 SMS notification
class SMSNotification implements NotificationStrategy {
  async send(message: string, recipient: string): Promise<boolean> {
    console.log(`📱 Sending SMS to ${recipient}: ${message}`);
    await new Promise(resolve => setTimeout(resolve, 500));
    return true;
  }
  
  getChannel(): string {
    return "SMS 📱";
  }
  
  getPriority(): number {
    return 2; // Medium priority
  }
}

// 🔔 Push notification
class PushNotification implements NotificationStrategy {
  async send(message: string, recipient: string): Promise<boolean> {
    console.log(`🔔 Sending push notification to ${recipient}: ${message}`);
    await new Promise(resolve => setTimeout(resolve, 100));
    return true;
  }
  
  getChannel(): string {
    return "Push 🔔";
  }
  
  getPriority(): number {
    return 3; // Highest priority
  }
}

// 🎯 Notification manager
class NotificationManager {
  private strategies = new Map<string, NotificationStrategy>();
  private history: Array<{
    timestamp: Date;
    channel: string;
    recipient: string;
    success: boolean;
  }> = [];
  
  constructor() {
    // Register default strategies
    this.registerStrategy("email", new EmailNotification());
    this.registerStrategy("sms", new SMSNotification());
    this.registerStrategy("push", new PushNotification());
  }
  
  // 📝 Register a strategy
  registerStrategy(name: string, strategy: NotificationStrategy): void {
    this.strategies.set(name, strategy);
    console.log(`✅ Registered ${strategy.getChannel()} strategy`);
  }
  
  // 🎯 Smart strategy selection
  private selectStrategy(priority: "low" | "medium" | "high"): NotificationStrategy {
    const hour = new Date().getHours();
    
    // 🌙 Quiet hours (10 PM - 8 AM): only high priority
    if (hour >= 22 || hour < 8) {
      if (priority !== "high") {
        return this.strategies.get("email")!;
      }
    }
    
    // Select based on priority
    switch (priority) {
      case "high":
        return this.strategies.get("push")!;
      case "medium":
        return this.strategies.get("sms")!;
      default:
        return this.strategies.get("email")!;
    }
  }
  
  // 📤 Send notification
  async notify(
    message: string,
    recipient: string,
    priority: "low" | "medium" | "high" = "medium"
  ): Promise<void> {
    const strategy = this.selectStrategy(priority);
    console.log(`🎯 Selected ${strategy.getChannel()} for ${priority} priority`);
    
    try {
      const success = await strategy.send(message, recipient);
      this.history.push({
        timestamp: new Date(),
        channel: strategy.getChannel(),
        recipient,
        success
      });
      
      if (success) {
        console.log(`✅ Notification sent successfully!`);
      }
    } catch (error) {
      console.log(`❌ Failed to send notification`);
      // Fallback to email
      if (strategy.getChannel() !== "Email 📧") {
        await this.strategies.get("email")!.send(message, recipient);
      }
    }
  }
  
  // 📊 Get statistics
  getStats(): void {
    console.log("📊 Notification Statistics:");
    const channelCounts = new Map<string, number>();
    
    this.history.forEach(entry => {
      const count = channelCounts.get(entry.channel) || 0;
      channelCounts.set(entry.channel, count + 1);
    });
    
    channelCounts.forEach((count, channel) => {
      console.log(`  ${channel}: ${count} sent`);
    });
  }
}

// 🎮 Test it out!
const notifier = new NotificationManager();

async function testNotifications() {
  await notifier.notify("Welcome! 🎉", "[email protected]", "low");
  await notifier.notify("Payment received 💰", "[email protected]", "medium");
  await notifier.notify("Security alert! 🚨", "[email protected]", "high");
  
  notifier.getStats();
}

testNotifications();

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create flexible algorithms with the Strategy Pattern 💪
✅ Swap behaviors at runtime without changing client code 🛡️
✅ Apply SOLID principles in real projects 🎯
✅ Debug strategy-related issues like a pro 🐛
✅ Build extensible systems with TypeScript! 🚀

Remember: The Strategy Pattern is about giving your code choices. It’s here to make your applications more flexible and maintainable! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Strategy Pattern!

Here’s what to do next:

💻 Practice with the notification system exercise
🏗️ Refactor existing code to use strategies where appropriate
📚 Move on to our next tutorial: Template Method Pattern
🌟 Share your strategy implementations with others!

Remember: Every design pattern expert was once a beginner. Keep coding, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn