Strategy Pattern with Javascript

Hello Devs!

Today I want to talk to you about the awesome Strategy Pattern.

First of all, what is this? 🤔
Well, the strategy pattern, aka policy pattern, is a behavioral design pattern that enables selecting an algorithm at runtime. This means that you can define a family of algorithms and make them interchangeable depending on a context.

When you can apply this pattern? 🔧

• When you need to have variations of several algorithms so they can be interchangeable at runtime.
• When there are a lot of conditional statements around several related algorithms.
• When you have classes with related behaviors.

Now, the fun part, a JavaScript example 👨‍💻👩‍💻

In the following example we have the classical problem, where you need to select an specific algorithm in runtime, and normally we use a switch statement or a lot of if/else statements.

//Example without strategy pattern

gameDifficulty(difficulty) {
  switch(difficulty){
    case 'easy':
      easyGameMode();
      break;
    case 'difficult'
      difficultMode();
      break;
  }
}

At first sight you could say that there is nothing wrong with this, and you are correct, but, the problem this pattern wants to tackle is when you have a lot of switch or if/else statements. If you later want to add more cases, you are not complying with the SOLID principle of Open Closed.

The best way to handle this problem is using classes or simply a object of functions.

In this case, we are using an object of functions:

//This can also be a class
const strategies = {
  easy: easyGameMode(),
  difficult: difficultGameMode(),
  //More strategies
  __default__: normalGameMode()
}

const easyGameMode = (game) => {
  game.difficulty(1);
  //Do easy game mode stuff in here
  return game;
}

const normalGameMode= (game) => {
  game.difficulty(2);
  //Do normal game mode stuff in here
  return game;
}

const difficultGameMode = (game) => {
  game.difficulty(3);
  //Do difficult game mode stuff in here
  return game;
}

const startGame = (game, difficulty) => {
  const gameModifier = strategies[difficulty] ?? strategies.__default__;
  return gameModifier(game, difficulty);
}

Advantages of strategy pattern 🏆

• if/else and switch statements are not easily testable. Each new branch adds another execution path and increases the complexity.
• You have Extensibility when a user or another dev wants to inject a new behavior.
• Improves readability because, if/else statements are "nameless" blocks, while a class which implements a particular strategy, typically should have a descriptive name.

I hope this can help you in your future projects or to refactor your current code.
For the React devs in here, in a future post I will show you how you could use the Strategy Pattern in the redux. ⚛️

As always, please feel free to leave your comments, feedback and love. ❤️