Command Design Pattern Explained

The Command pattern wraps a request as an object containing the action and its data, so you can queue, log, undo or pass it around. It decouples whoever triggers an action from whoever performs it.

The concept

A command has an execute() method and often undo(). An invoker (button, scheduler) just calls execute() without knowing the details.

It enables undo/redo stacks, job queues, macros and transaction logs.

Request as an object

Practical examples

Undoable command

class AddText {
  constructor(doc, t) { this.doc = doc; this.t = t }
  execute() { this.doc.text += this.t }
  undo() { this.doc.text = this.doc.text.slice(0, -this.t.length) }
}
const history = []
const run = (c) => { c.execute(); history.push(c) }
const undo = () => history.pop()?.undo()

Queue jobs

dispatch(new SendInvoice($order));

Redux actions are commands

dispatch({ type: 'cart/add', id: 7 })

Common mistakes

• Commands with hidden side effects that cannot be undone.
• Holding large state in every command.
• No limit on the history stack.

Key takeaways

• Encapsulate a request as an object.
• Enables undo, queues and logs.
• Invoker stays decoupled.

FAQ

Command vs Strategy?

Command represents an action to run; Strategy represents an algorithm choice.

Where is it used?

Editors, job queues, CLI frameworks.