Design Patterns: Using the Strategy Pattern in JavaScript

Design patterns series — part 1

Carlos Caballero
Sep 24, 2019 · 5 min read

There are 23 classical design patterns described in the book Design Patterns: Elements of Reusable Object-Oriented Software. These patterns provide a solution to a particular problem, one which is repeated in the software development.

In this piece I will look at the strategy pattern — how it works, how and when it should be apply. This pattern is known as policy in other contexts.

Strategy Pattern: Basic Idea

The strategy pattern is a behavioral design pattern that enables selecting an algorithm at runtime

— Wikipedia

Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from clients that use it.

— Design Patterns: Elements of Reusable Object-Oriented Software

The main feature of this pattern is that the client has a set of algorithms in which a specific algorithm will be selected for use during runtime. These algorithms are interchangeable between them.

The following code show the classical problem, one in which you need to select a concrete algorithm in your app. In this code, you use the switch control structure of any programming language.

However, it can be more flexible using the Strategy Pattern which takes the following structure:

The UML’s diagram of this pattern:

Each strategy is represented with a concrete object. So, the client/context contains a Strategy object (concreteStrategyA, concreteStrategyB,…) which implements the interface Strategy. The key interchange consists in implementing a method in context, which changes the instance of strategy. For example: setStrategy.

When to Use the Strategy Pattern

Advantages of the Strategy Pattern

The Strategy Pattern has several advantages:

Strategy Pattern: A Basic Implementation Using JavaScript

I’m going to show you how you can implement this pattern in JavaScript. Remember: Javascript lacks interfaces — you need to program a class called StrategyManager, which is used as the interface:

This class contains a private attribute called _strategy, which represents the strategy used. The method doAction will be implemented in each concrete strategy. The strategy pattern differs from the UML in JavaScript in the lack of OOP features in the language.

The implementation of each concrete strategy is the following:

Note that the concrete method doAction is implemented in each concrete strategy.

Finally, the context/client must contain the StrategyManager (or strategy interface is the language is OO) to use the concrete strategy:

Strategy Pattern: A set of Strategies Using JavaScript

In the following implementation, our StrategyManager gets more complex, containing a list of algorithms. In this case, you can change the attribute _strategy instead of an array called _strategies.

Finally, you add new strategies in the list of strategies using the method addStrategy. The Strategy class has two attributes: 1. Strategy’s name and 2. Algorithm (called handler). The method doAction is used to invoke the concrete algorithm.

Finally, the client/context code where we use the concrete strategy:

The first part is to create concrete strategies (which can be constructed using the Singleton pattern and the Factory pattern) and added to the strategyManager (which could be our interface). The next part of the client is selecting the strategy to use — this strategy can be selected using a GUI or CLI from our app.

Finally, note that if an unsupported strategy is selected the system will return an error. This can be used when you want to provide a premium algorithm to your system.

If you liked this article and would like to read similar articles, don’t forget to clap.

Click and drag to clap more than once. 50 is the limit.

Strategy Pattern can help you avoid complexity in your code when you need to select a concrete algorithm. In this piece, I presented a simple implementation with the language JavaScript, which lacks interfaces. If you use a programming language with an interface you can follow the pattern’s UML.

Most importantly, don’t just implement the pattern as I’ve shown you here. You need to know what the problem is that the pattern resolves and why you should use it. The implementation will vary depending on the programming language.

Better Programming

Advice for programmers.

Carlos Caballero

Written by

Hi! My name is Carlos Caballero and I’m PhD. in Computer Science from Málaga, Spain. Teaching developers and degree/master computer science how to be experts!

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade