Introduction to the Command Pattern in JavaScript

Introduction to the Command Pattern

Welcome to the Behavioral Patterns course! In this lesson, we will explore the Command Pattern, a fundamental design pattern that is highly useful for promoting flexible and reusable code. This pattern is particularly effective in scenarios where you need to parameterize objects with operations, queues, or logs. You might recall from previous lessons that behavioral design patterns assist with object communication and responsibility distribution within your software. The Command Pattern encapsulates a request as an object, thereby allowing users to parameterize clients with queues, requests, and operations. This encapsulation enables us to decouple the sender from the receiver, enhancing the flexibility and maintainability of the system. The Command Pattern involves creating a command interface with an execute method. We create concrete command classes that implement this interface, each representing a specific action. Finally, we integrate these commands with a request invoker to execute actions. This structure allows us to easily extend or modify commands without changing the invoker or the receiver.

Key Components and Their Implementation

To understand the Command Pattern, we should first identify its essential components: Command, Receiver, Concrete Commands, and Invoker . Here's a breakdown of each component, along with their implementations. Each of these components plays a critical role in decoupling the sender and receiver, thereby making the system more modular and flexible.

Command Interface

The Command interface requires an execute method that all concrete commands must implement. This setup provides a consistent method signature for executing various commands, making the system easier to extend. Since JavaScript doesn't have a formal interface or abstract class system, we can establish a convention using regular JavaScript classes. JavaScript class Command {execute() {throw new Error("Execute method must be implemented");}}

Receiver

The receiver is the object that performs the actual action. In our example, the Light class will serve as the receiver that can turn the light on or off. The receiver contains the logic that gets executed when the command is invoked. JavaScript class Light {on() {console.log("Light is on.");} off() {console.log("Light is off.");}}

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Putting It All Together

Now that we have broken down the Command Pattern into its core components, let's put it all together in a cohesive example. The RemoteControl (invoker) holds and triggers the command objects without knowing their implementation details. The LightOnCommand and LightOffCommand (concrete commands) encapsulate actions on the Light (receiver), translating invoker requests into specific receiver operations. This setup decouples the sender (invoker) from the receiver, promoting flexibility and extensibility in the system. This example demonstrates how encapsulating requests as objects can significantly simplify the design of a system with multiple actions and receivers.

JavaScript

class Command {
    execute() {
        throw new Error("Execute method must be implemented");
    }
}

class Light {
    on() {
        console.log("Light is on.");
    }

    off() {
        console.log("Light is off.");
    }
}

class LightOnCommand extends Command {
    constructor(light) {
        super();
        this.light = light;
    }

    execute() {
        this.light.on();
    }
}

class LightOffCommand extends Command {
    constructor(light) {
        super();
        this.light = light;
    }

    execute() {
        this.light.off();
    }
}

class RemoteControl {
    constructor() {
        this.command = null;
    }

    setCommand(command) {
        this.command = command;
    }

    pressButton() {
        if (this.command) {
            this.command.execute();
        }
    }
}

const light = new Light();
const lightOn = new LightOnCommand(light);
const lightOff = new LightOffCommand(light);

const remote = new RemoteControl();
remote.setCommand(lightOn);
remote.pressButton(); // Output: Light is on.
remote.setCommand(lightOff);
remote.pressButton(); // Output: Light is off.

class Command {
    execute() {
        throw new Error("Execute method must be implemented");
    }
}

class Light {
    on() {
        console.log("Light is on.");
    }

    off() {
        console.log("Light is off.");
    }
}

class LightOnCommand extends Command {
    constructor(light) {
        super();
        this.light = light;
    }

    execute() {
        this.light.on();
    }
}

class LightOffCommand extends Command {
    constructor(light) {
        super();
        this.light = light;
    }

    execute() {
        this.light.off();
    }
}

class RemoteControl {
    constructor() {
        this.command = null;
    }

    setCommand(command) {
        this.command = command;
    }

    pressButton() {
        if (this.command) {
            this.command.execute();
        }
    }
}

const light = new Light();
const lightOn = new LightOnCommand(light);
const lightOff = new LightOffCommand(light);

const remote = new RemoteControl();
remote.setCommand(lightOn);
remote.pressButton(); // Output: Light is on.
remote.setCommand(lightOff);
remote.pressButton(); // Output: Light is off.

Enhancing the Command Pattern

To make the example more dynamic and extendable while maintaining the proper usage of the Command Pattern with an invoker, we can introduce an object within the invoker to manage our command objects. This adjustment allows us to easily look up and execute commands based on keys while still preserving the invoker's role. Here’s an updated version of the main section:

JavaScript

class RemoteControl {
    constructor() {
        this.commands = {};
    }

    setCommand(name, command) {
        this.commands[name] = command;
    }

    pressButton(name) {
        if (this.commands[name]) {
            this.commands[name].execute();
        } else {
            console.log(`No command named '${name}' found.`);
        }
    }
}

const light = new Light();
const lightOn = new LightOnCommand(light);
const lightOff = new LightOffCommand(light);

const remote = new RemoteControl();
remote.setCommand("lightOn", lightOn);
remote.setCommand("lightOff", lightOff);

// Simulate user input
remote.pressButton("lightOn"); // Output: Light is on.
remote.pressButton("lightOff"); // Output: Light is off.

class RemoteControl {
    constructor() {
        this.commands = {};
    }

    setCommand(name, command) {
        this.commands[name] = command;
    }

    pressButton(name) {
        if (this.commands[name]) {
            this.commands[name].execute();
        } else {
            console.log(`No command named '${name}' found.`);
        }
    }
}

const light = new Light();
const lightOn = new LightOnCommand(light);
const lightOff = new LightOffCommand(light);

const remote = new RemoteControl();
remote.setCommand("lightOn", lightOn);
remote.setCommand("lightOff", lightOff);

// Simulate user input
remote.pressButton("lightOn"); // Output: Light is on.
remote.pressButton("lightOff"); // Output: Light is off.

In this enhancement, commands are stored in an object within the RemoteControl (invoker), simplifying command referencing and execution via keys. This structure maintains the integrity of the Command Pattern, ensuring that the invoker triggers the commands. This dynamic structure helps handle various inputs and extends the system with ease.

Introduction to the Command Pattern in JavaScript