Command pattern - Low-Level Design Guide

Overview

The Command pattern turns a request into an object that contains everything needed to perform it: the action, the receiver, and the parameters. Because a command is an object, it can be queued, logged, scheduled, retried, sent over a network, and undone.

The invoker (a button, a scheduler, a remote control) calls command.execute() without knowing what it does. Commands with undo() let editors, spreadsheets, and games support undo/redo stacks. Job queues and event-sourced systems are large-scale versions of the same idea.

A restaurant order ticket

The waiter writes the order on a ticket (command) and places it on the rail. The cook (receiver) executes it later. The ticket can be queued, reordered, or cancelled without the waiter knowing how to cook.

When to use it

Undo/redo is required.
Operations must be queued, scheduled, or retried.
UI actions (buttons, shortcuts, menus) should share the same operations.
Macro recording or audit logs of actions.

Where it shows up in interviews

Undo / redo

Recognize it when: users can reverse actions.

Design a text editor
Design a drawing app
Design a spreadsheet

Queued operations

Recognize it when: actions executed later or remotely.

Design a task scheduler
Design a smart home remote
Design a job queue

Where it is used in real software

Editor undo stacks

VS Code, Photoshop, and Figma record operations as commands with inverse actions.

Java Runnable and ExecutorService

Runnable tasks are commands submitted to a thread pool for later execution.

Redux actions

Actions are serializable command-like objects dispatched to reducers, enabling time-travel debugging.

Key terms

Command: Object with execute() (and often undo()).
Receiver: The object that does the actual work.
Invoker: Triggers commands without knowing details.
Client: Creates commands and binds them to receivers.
Macro command: A command composed of other commands.

How it works, step by step

1
Define the Command interface
execute() and undo().
2
Implement concrete commands
Each stores its receiver and parameters.
3
Store undo information
Previous state or inverse parameters.
4
Invoker executes and records history
Push to an undo stack.
5
Undo pops and reverses
Redo re-executes from a redo stack.

Undo and redo stacks

type 'Hi'

type ' there'

bold

Undo stack

Redo stack

STEP 1Three commands execute; each is pushed onto the undo stack.

Text editor history

Document starts empty

Action	Document	Undo stack	Redo stack
Insert 'Hello'	Hello	[Insert]	[]
Insert ' World'	Hello World	[Insert, Insert]	[]
Undo	Hello	[Insert]	[Insert ' World']
Redo	Hello World	[Insert, Insert]	[]
Delete 5 chars, then undo	Hello World	[Insert, Insert]	[Delete]

NOWAction: Insert 'Hello' | Document: Hello | Undo stack: [Insert] | Redo stack: []

Each command knows how to reverse itself, so history management is generic.

Implementation

1interface Command { execute(): void; undo(): void }2 3class TextDocument { content = ""; }4 5class InsertText implements Command {6  constructor(private doc: TextDocument, private text: string, private at: number) {}7  execute() { this.doc.content = this.doc.content.slice(0, this.at) + this.text + this.doc.content.slice(this.at); }8  undo() { this.doc.content = this.doc.content.slice(0, this.at) + this.doc.content.slice(this.at + this.text.length); }9}10 11class DeleteText implements Command {12  private removed = "";13  constructor(private doc: TextDocument, private at: number, private length: number) {}14  execute() {15    this.removed = this.doc.content.slice(this.at, this.at + this.length);16    this.doc.content = this.doc.content.slice(0, this.at) + this.doc.content.slice(this.at + this.length);17  }18  undo() { this.doc.content = this.doc.content.slice(0, this.at) + this.removed + this.doc.content.slice(this.at); }19}20 21class Editor {22  private undoStack: Command[] = [];23  private redoStack: Command[] = [];24  run(cmd: Command) { cmd.execute(); this.undoStack.push(cmd); this.redoStack = []; }25  undo() { const c = this.undoStack.pop(); if (c) { c.undo(); this.redoStack.push(c); } }26  redo() { const c = this.redoStack.pop(); if (c) { c.execute(); this.undoStack.push(c); } }27}28 29const doc = new TextDocument();30const editor = new Editor();31editor.run(new InsertText(doc, "Hello", 0));32editor.run(new InsertText(doc, " World", 5));33editor.undo(); // "Hello"34editor.redo(); // "Hello World"

Complexity and performance

Execute / undoO(command work)

Plus O(1) stack ops.

History memoryO(commands x undo data)

Cap history length.

Trade-offs

Flexibility vs class count

A class per action adds code; lambdas can replace simple commands without undo.

Undo data vs memory

Storing previous state is simple but memory heavy; storing inverse operations is compact but harder.

Variants and related techniques

Macro commands

A composite of commands executed and undone as one.

Command queue / job system

Serialized commands processed by workers.

Command vs Memento for undo

Command stores how to reverse; Memento stores snapshots.

Common mistakes

Not clearing redo after a new command.
Fix: New actions invalidate the redo branch.
Commands that depend on mutable external state at undo time.
Fix: Capture needed data at execute time.

Interview questions

How would you implement undo/redo in a text editor?

Model each edit as a Command with execute() and undo(); keep an undo stack and a redo stack. Undo pops from undo, reverses, and pushes to redo; any new command clears redo.

Command vs Strategy?

A Strategy is how to do something, chosen and reused by a context. A Command is a specific request to do something, captured as an object to be executed, queued, logged, or undone.

Practice problems

Problem	Difficulty	What it trains
Smart home remote with undo	Easy	Invoker and receivers.
Drawing app with undo/redo and macros	Medium	History management.