The Command Design Pattern in JavaScript
Tags: javascript, node, webdev
Published: 2019-12-24 05:09:08


Find me on [medium](https://medium.com/@jsmanifest)

In JavaScript, one of the most popular design patterns that people like to use is the [Command Design Pattern](https://en.wikipedia.org/wiki/Command_pattern), a pattern that allows developers to separate objects that request something from those that want to call their desired methods.

If this is your first time hearing about the command pattern, hopefully by reading this post you will gain a good understanding of what it is, how it works and why we need them in certain situations.

## What is the command design pattern?

Design patterns are usually categorized between [three different types of categories](https://www.gofpatterns.com/design-patterns/module2/three-types-design-patterns.php), and in this case the command pattern falls into the _behavioral_ one.

The reason why is because its purpose is to encapsulate objects that have the double responsibility of deciding which methods to call and what happens inside.

In a visual perspective, that may look something like:

![command pattern visual 1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/command-design-pattern-in-javascript/command+pattern+visual+1.jpg)

## How it works

So essentially, its duty is to split the communication to separate objects so that they become loosely coupled while still maintaining the end goal.

The participants that are involved in this pattern are commonly referred to as:

### Client

The client's responsibility is to _create_ the command object and _pass it to the invoker_.

### Invoker

The invoker _receives_ the command object _from the client_ and its _only_ responsibility is to _call (or invoke) a command_.

### Receiver

Then, the receiver _receives the command_ and looks for a method to call based on the received command.

### How it looks like

We've just seen an image of how one or more objects behave in code before being applied with the command pattern. Here is how it would look like with it applied:

One evidently large and complex object can end up becoming easier to manage in the long run because the duties of one object vs another were isolated in their own private world instead of being cluttered together.

Command objects by convention usually define a method with a name like `execute` which has the responsibility of _invoking_ a method, which by convention is known as the _invoker_. The object that holds the methods is commonly known as the _"receiver"_.

## Why we need the command pattern

The biggest point of using the command pattern is to split the code that _wants_ to do something from the code that is _responsible for handling it_. When you feel like your code is handling an operation multiple times in different parts of the code, it may become a good idea to start applying it. Having said that, these command objects give us nice benefits for unique situations like being able to _centralize_ the processing of each action/operation individually. This means that in our earlier example our object only needs _one_ `.eat()` command, one `.jump()` command, and one `.run()` command.

## When to use

Some example situations in which you can make great use of the command pattern are:

- Undo / Reset
  - Since all processing of each action/operations are centralized by commands, they are often fit for implementing undo/reset for applications.
- You need a command to have a life span independent of the original request.
- Furthermore, if you want to queue, specify and execute requests at different times.
- You need undo/redo operations. The command's execution can be stored for reversing its effects. It is important that the Command class implements the methods undo and redo.
- You need to structure a system around high-level operations built on primitive operations.

## Real world example

Now lets pretend we are launching a new frog manager application which is intended to help you record and manage a list of frogs over time as they age.

In this application, we're going to have a `Frog` class, instantiating some useful properties and methods to help with that:

```js
// Creates and returns a frog api which can help us track activities of each frog
function createFrog(options) {
  const _opts = {
    name: options.name,
    sex: options.sex,
    age: options.age,
  }

  const foodsEaten = []
  const wordsSpoken = []

  return {
    getOption(key) {
      return _opts[key]
    },
    getFoodsConsumed() {
      return foodsEaten
    },
    getWordsSpoken() {
      return wordsSpoken
    },
    eat(food) {
      console.log(`Frog "${_opts.name}" is eating: ${food.name} (${food.type})`)
      foodsEaten.push(food)
    },
    talk(words) {
      console.log(words)
      wordsSpoken.push(...words)
    },
  }
}
```

Great! Now we can make multiple frogs by instantiating them:

```js
const mikeTheFrog = createFrog({ name: 'mike', sex: 'male', age: 1 })
const sallyTheOtherFrog = createFrog({ name: 'sally', sex: 'female', age: 4 })
const michelleTheLastFrog = createFrog({
  name: 'michelle',
  sex: 'female',
  age: 10,
})
```

Lets pretend move on to making our frog application come to life:

> `index.js`

```js
const api = {
  fetchFrogs: function() {
    return Promise.resolve([
      { id: 1, name: 'mike', sex: 'male', age: 1 },
      { id: 2, name: 'sally', sex: 'female', age: 2 },
      { id: 3, name: 'michelle', sex: 'female', age: 9 },
    ])
  },
  saveToDb: function(frogs) {
    // Just pretend this is actually saving to a real database
    console.log(`Saving ${frogs.length} frogs to our database...`)
    return Promise.resolve()
  },
}

async function init() {
  try {
    const frogs = await api.fetchFrogs()
    return frogs.map((data) => createFrog(data))
  } catch (error) {
    console.error(error)
    throw error
  }
}

function createFrogsManager() {
  const frogs = []

  return {
    addFrog(frog) {
      frogs.push(frog)
      return this
    },
    getFrogs() {
      return frogs
    },
    getMaleFrogs() {
      return frogs.filter((frog) => {
        return frog.getOption('sex') === 'male'
      })
    },
    getFemaleFrogs() {
      return frogs.filter((frog) => {
        return frog.getOption('sex') === 'female'
      })
    },
    feedFrogs(food) {
      frogs.forEach((frog) => {
        frog.eat(food)
      })
      return this
    },
    save: function() {
      return Promise.resolve(api.saveToDb(frogs))
    },
  }
}

function Food(name, type, calories) {
  this.name = name
  this.type = type
  this.calories = calories
}

const fly = new Food('fly', 'insect', 1.5)
const dragonfly = new Food('dragonfly', 'insect', 4)
const mosquito = new Food('mosquito', 'insect', 1.8)
const apple = new Food('apple', 'fruit', 95)

init()
  .then((frogs) => {
    const frogsManager = createFrogsManager()
    // Add each fetched frog to our managing list so we can manage them
    frogs.forEach((frog) => {
      frogsManager.addFrog(frog)
    })

    const genders = {
      males: frogsManager.getMaleFrogs(),
      females: frogsManager.getFemaleFrogs(),
    }
    // Lets feed the frogs and then save this new data to the database
    frogsManager
      .feedFrogs(fly)
      .feedFrogs(mosquito)
      .save()
    console.log(
      'We reached the end and our database is now updated with new data!',
    )
    console.log(
      `Fed: ${genders.males.length} male frogs and ${genders.females.length} female frogs`,
    )
    frogsManager.getFrogs().forEach((frog) => {
      console.log(
        `Frog ${frog.getOption('name')} consumed: ${frog
          .getFoodsConsumed()
          .map((food) => food.name)
          .join(', ')}`,
      )
    })
  })
  .catch((error) => {
    console.error(error)
  })
```

Result:

![command design pattern test prod frog code](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/command-design-pattern-in-javascript/command+design+pattern+test+prod+frog+code.jpg)

Our application is becoming extremely valuable!

Now keep in mind that we did _not_ apply the command design pattern in the code--however the code runs perfectly fine and we _can_ be fine if our frog application wasn't going to grow any bigger.

Now lets take a real close look to our `createFrogsManager` api. We can see that this gives us an api to manage a list of frogs over time by providing convenient utilities to track the activities of multiple frogs.

However, if you look closely there are some potential issues that can bite us in the future.

The first thing we see is that our api `createFrogsManager` is tightly _coupled_ with carrying out the methods that we want to work with. Our code at the end utilizes this interface and directly invokes its methods, being entirely dependent on the returned api. This api is responsible for both invoking and handling each operation.

For example, lets talk about these two methods returned for us to use:

```js
getMaleFrogs() {
  return frogs.filter((frog) => {
    return frog.getOption('sex') === 'male'
  })
},
getFemaleFrogs() {
  return frogs.filter((frog) => {
    return frog.getOption('sex') === 'female'
  })
}
```

What if in the future the path to get each frog's _gender_ was slightly changed?

So instead of this:

```js
function createFrog(options) {
  const _opts = {
    name: options.name,
    sex: options.sex,
    age: options.age,
  }

  const foodsEaten = []
  const wordsSpoken = []

  return {
    getOption(key) {
      return _opts[key]
    },
    getFoodsConsumed() {
      return foodsEaten
    },
    getWordsSpoken() {
      return wordsSpoken
    },
    eat(food) {
      console.log(`Frog "${_opts.name}" is eating: ${food.name} (${food.type})`)
      foodsEaten.push(food)
    },
    talk(words) {
      console.log(words)
      wordsSpoken.push(...words)
    },
  }
}
```

It became this instead:

```js
function createFrog(options) {
  const _opts = {
    name: options.name,
    gender: options.gender,
    age: options.age,
  }

  const foodsEaten = []
  const wordsSpoken = []

  return {
    getOption(key) {
      return _opts[key]
    },
    getFoodsEaten() {
      return foodsEaten
    },
    getWordsSpoken() {
      return wordsSpoken
    },
    eat(food) {
      console.log(`Frog "${_opts.name}" is eating: ${food.name} (${food.type})`)
      foodsEaten.push(food)
    },
    talk(words) {
      console.log(words)
      wordsSpoken.push(...words)
    },
  }
}
```

Days have passed and things have been silent. No reports of complaints so everything must be fine. After all, our server has been up and running 24/7 and users have been using our application since then.

Then, a customer had called our customer service department 2 weeks later and reported that all of her frogs died and blamed our platform for her loss after placing her entire trust into us believing that our intelligent algorithms would help her make the right decisions for keeping them properly managed.

Our developers were immediately notified and were asked to debug the situation to see if there were any glitches in code that might have sparked this horrifying event.

At closer examination, we run a test code and realized that our code is actually reporting _incorrect information_!

![pre-applied command design pattern in javascript data mismatch](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/command-design-pattern-in-javascript/command+design+pattern+test+prod+frog+code+data+mismatch.jpg)

What?! No way!

One of the developers pointed out that the problem was that the `.sex` key of a frog object was renamed to `.gender`!

```js
const _opts = {
  name: options.name,
  gender: options.gender,
  age: options.age,
}
```

We had to go find and change the code that used the previous references by key so that it works normally again:

```js
getMaleFrogs() {
  return frogs.filter((frog) => {
    return frog.getOption('gender') === 'male'
  })
},
getFemaleFrogs() {
  return frogs.filter((frog) => {
    return frog.getOption('gender') === 'female'
  })
    }
```

Oh, and if you haven't caught it yet, there was another issue with our code. It seems the method `getFoodsConsumed` inside `createFrog` was also changed to `getFoodsEaten`:

> Previous:

```js
getFoodsConsumed() {
  return foodsEaten
}
```

> Current:

```js
getFoodsEaten() {
  return foodsEaten
}
```

In another scenario, what if the `createFrogsManager` api had some of its methods renamed, like `.save` to `.saveFrogs` or `.getFrogs` to `.getAllFrogs`? This means that _every single part of our code that used these methods manually need to be updated_ to the new names!

So a major problem we're having here in the examples is that we're having to go fix all of our code that were affected to the change! It becomes a hide and seek game. But it doesn't need to be.

So how can the command pattern help turn this around?

In the beginning of this post we mentioned that the command pattern allows developers to _separate_ objects that _request_ something _away from_ those that _want_ to call their desired methods.

Also somewhere in the beginning of this post we mentioned the three participants that will be involved. They were the _client_, _invoker_ and _receiver_.

Here is a representation of that:

![command design pattern visual representation finale](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/command-design-pattern-in-javascript/command+design+pattern+finale+visual+flow.jpg)

Lets refactor our `createFrogsManager` using the command approach:

```js
function createFrogsManager() {
  const frogs = []

  return {
    execute(command, ...args) {
      return command.execute(frogs, ...args)
    },
  }
}
```

This is all we really need because we're going to let the _commands_ do the work.

We'll go ahead and create the `Command` constructor that we will use to create the concrete commands for each method of the api:

```js
function Command(execute) {
  this.execute = execute
}
```

Now that that's settled, lets go ahead and make the concrete commands:

```js
function AddFrogCommand(frog) {
  return new Command(function(frogs) {
    frogs.push(frog)
  })
}

function GetFrogsCommand() {
  return new Command(function(frogs) {
    return frogs
  })
}

function FeedFrogsCommand(food) {
  return new Command(function(frogs) {
    frogs.forEach((frog) => {
      frog.eat(food)
    })
  })
}

function SaveCommand() {
  return new Command(function(frogs) {
    api.saveToDb(
      frogs.map((frog) => ({
        name: frog.name,
        gender: frog.gender,
        age: frog.age,
      })),
    )
  })
}
```

With this in place, we can use it like so:

```js
function Food(name, type, calories) {
  this.name = name
  this.type = type
  this.calories = calories
}

const mikeTheFrog = createFrog({
  name: 'mike',
  gender: 'male',
  age: 2,
})

const sallyTheFrog = createFrog({
  name: 'sally',
  gender: 'female',
  age: 1,
})

const frogsManager = createFrogsManager()
frogsManager.execute(new AddFrogCommand(mikeTheFrog))
frogsManager.execute(new FeedFrogsCommand(new Food('apple', 'fruit', 95)))
frogsManager.execute(new FeedFrogsCommand(new Food('fly', 'insect', 1)))
frogsManager.execute(new AddFrogCommand(sallyTheFrog))
frogsManager.execute(new SaveCommand())
const updatedFrogs = frogsManager.execute(new GetFrogsCommand())
```

Result:

![command design pattern saving frogs to database](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/command-design-pattern-in-javascript/command+design+pattern+saving+frogs+to+database.jpg)

I'd like to mention that in the visual, the receiver is blank because in JavaScript _all_ functions and objects are basically commands themselves, which we demonstrated in the `.execute` by invoking commands directly:

```js
function createFrogsManager() {
  const frogs = []

  return {
    execute(command, ...args) {
      return command.execute(frogs, ...args)
    },
  }
}
```

## Conclusion

And that concludes the end of this post! I hope you found this to be valuable and look out for more in the future!

Find me on [medium](https://medium.com/@jsmanifest)