Strategy Pattern with Javascript

Walther Carrasco — Wed, 27 Jan 2021 12:20:27 +0000

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. ❤️

Adapter Pattern with JavaScript

Walther Carrasco — Tue, 26 Jan 2021 10:51:59 +0000

Hello devs!

Today I challenged myself to write my first post and I wanted to be about the Adapter Design Pattern.

Design patterns are the basis of all good software. A design pattern is a general solution to a reappearing problem.

Now, what is Adapter Pattern? If we bring the problem from the real domestic world, a adapter is used to connect two or more things which can't be connected with their original sockets.

An example of this is with the new cellphones. Normally most of the phones have a universal port (3.5mm) for headphones. So their connection is made directly.
With the new cellphones, the companies decided to remove the headphone port, leaving only the charging port.

Here is where the adapter comes into play. Companies made an adapter so you can still use the 3.5mm headphones using the charging port.

Now that we understand better what is the Adaptor Pattern, I present you a JavaScript example.

Imagine that we decided to create a Calculator. This calculator needs three attributes (num1, num2, operation), the last one is in charge of the operation that will be realized.

class Calculator {
  operation(num1, num2, operation) {
    switch (operation) {
      case 'multiplication':
        return num1 * num2;
      case 'division':
        return num1 / num2;
      default:
        return NaN;
    }
  }
}

export default Calculator;

and we can use the class like this:

import Calculator from "./Calculator"

const calculator = new Calculator();
const multi = calculator.operation(1, 2, 'multiplication');
console.log(multi ); //output 2

const div = calculator.operation(10, 2, 'division');
console.log(div); //output 5

The time passes and the project gets bigger and bigger. It's time for a complete refactor of the Calculator class!

class Calculator {
  add(num1, num2) {
    return num1 + num2;
  }
  div(num1, num2) {
    return num1 / num2;
  }
  mult(num1, num2) {
    return num1 * num2;
  }
}

export default Calculator;

This is the new way of using the calculator:

import Calculator from "./Calculator"

const calculator = new Calculator();
const sum = calculator.add(1, 2);
console.log(sum); //output 3

const sub = calculator.div(10, 2);
console.log(sub); //output 5

As we can see, the refactor is no more compatible with the last version. For this we need to create an adaptor to make it work with both versions.

import Calculator from "./Calculator";

class CalculatorAdapter {
  constructor() {
    this.calculator = new Calculator();
  }
  operation(num1, num2, operation) {
    switch (operation) {
      case "add":
        return this.calculator.add(num1, num2);
      case "multiplication":
        return this.calculator.mult(num1, num2);
      case "division":
        return this.calculator.div(num1, num2);
      default:
        return NaN;
    }
  }
}

export default CalculatorAdapter;

Now we can use the the original Calculator with the Adapter.

import Calculator from "./Calculator";
import CalculatorAdapter from "./CalculatorAdapter";

//Adapter
const calcAdapter = new CalculatorAdapter();
const sumAdapter = calcAdapter.operation(2, 2, "multiplication");
console.log(sumAdapter); //output 4

//Calculator
const calculator = new Calculator();
const sum = calculator.mult(2, 2);
console.log(sum); //output 4

What are the pros and cons of this pattern?
Pros

It works with SOLID principles
We can add new adapters without braking the existing code.

Cons

The complexity of the code increases. This due the necessity of introducing new interfaces and classes.

Thanks for reading! Feel free to leave your feedback and love.

Have a great time and see you in future posts. 🔥

DEV Community: Walther Carrasco

Strategy Pattern with Javascript

Adapter Pattern with JavaScript