Introduction to the Command Pattern in JavaScript

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.

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.

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.

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

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.

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

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