Command Method example in JavaScript Design Patterns

Advantages of the Command Method in JavaScript Design Patterns

problem statement

We will implement control of a light bulb’s state (On or Off) using an organized and flexible structure. The system should allow the client to interact with the light bulb via commands and provide a simple and efficient way to switch the light on and off.

Implementation of Command Method using JavaScript:

1. Creation of Command class

Note: JavaScript doesn’t support Interfaces directly. Create a class with empty implementation and override the method in other class.

Javascript

class Command {
  execute() {}
}

In this step, We have created the command class which contains the declaration of the execute method.

2. Creation of Concrete Command class

Javascript

class OnCommand extends Command {
  constructor(lightBulb) {
    super();
    this.lightBulb = lightBulb;
  }
 
  execute() {
    this.lightBulb.on();
  }
}
 
class OffCommand extends Command {
  constructor(lightBulb) {
    super();
    this.lightBulb = lightBulb;
  }
 
  execute() {
    this.lightBulb.off();
  }
}

3. Creation of Receiver

In this step, We have created two classes namely `OnCommand` and `OffCommand` which extend the `Command` class. Each class contains a variable `lightBulb` which holds the information i.e. `On` or `Off ` status. These classes override the `execute` method of the command class and define it with command-specific implementation.

Javascript

class LightBulb {
  on() {
    console.log('Bulb is ON');
  }
 
  off() {
    console.log('Bulb is OFF');
  }
}

4. Creation of Invoker

In this step, We have created the `Receiver` class which is `LightBulb`, which contains the actual implementation of the `on` and `off` methods.

Javascript

class Switch {
  constructor() {
    this.command = null;
  }
 
  setCommand(command) {
    this.command = command;
  }
 
  executeCommand() {
    this.command.execute();
  }
}

In this step, We have created the Invoker which is a `Switch` class that defines a constructor that initializes the command to a null value at first. The Switch class defines two methods namely `setCommand` and `executeCommand` whose purpose is to set the command (on or off) and execute the command (the console logs the information).

5. Usage and Client code

The client code interacts with the `Concrete Command` class, `Receiver` and `Invoker`. The `Invoker (Switch)` sets the command and executes the command accordingly.

Javascript

const light = new LightBulb();
const on = new OnCommand(light);
const off = new OffCommand(light);
 
const switchButton = new Switch();
 
switchButton.setCommand(On);
switchButton.executeCommand();
 
switchButton.setCommand(off);
switchButton.executeCommand();

Below is the complete combined code for the above example:

Javascript

class Command {
  execute() {}
}
class OnCommand extends Command {
  constructor(lightBulb) {
    super();
    this.lightBulb = lightBulb;
  }
 
  execute() {
    this.lightBulb.On();
  }
}
 
class OffCommand extends Command {
  constructor(lightBulb) {
    super();
    this.lightBulb = lightBulb;
  }
 
  execute() {
    this.lightBulb.Off();
  }
}
class LightBulb {
  On() {
    console.log('Bulb is ON');
  }
 
  Off() {
    console.log('Bulb is OFF');
  }
}
class Switch {
  constructor() {
    this.command = null;
  }
 
  setCommand(command) {
    this.command = command;
  }
 
  executeCommand() {
    this.command.execute();
  }
}
const light = new LightBulb();
const On = new OnCommand(light);
const Off = new OffCommand(light);
 
const switchButton = new Switch();
 
switchButton.setCommand(On);
switchButton.executeCommand();
 
switchButton.setCommand(Off);
switchButton.executeCommand();

Output

Bulb is ON
Bulb is OFF

Components of Command Method

The components of the Command Method include

Command Interface: The Command interface declares the methods that should be implemented by all the concrete classes. It serves as a common template that declares the method that is common for all the classes.
Concrete Command class: The Concrete Command class implements the actions through the execute method and holds the information related to performed actions.
Receiver: The Receiver class contains the actual logic to process the requests.
Invoker: The invoker holds a reference to a command and triggers the execution of the command without knowing the specifics of the action being performed.

Diagrammatic Representation of Command Method:

Below is the explanation of the above diagram:

In this diagram,

ON/OFF functionality of Light bulb using command design pattern, we can find `Command` class, which contains the methods that should be executed by all the remaining class which extends the `Command` class, here we declared the execute method that should be defined and implemented by the sub classes of `Command` class. i.e. `OnCommand` and `OffCommand` classes.
`execute` method contains the implementation for specific commands and calls the respective methods associated with those commands (`on` and `off`).
The implementation for `on` and `off` is mentioned in the `LightBulb` class which acts as the Reciever class.
`OnCommand` , `OffCommand` and `LightBulb` classes are directly associated. The `Switch` class acts as the invoker through which we can able to the set the specific command and execute that command and the defined methods `SetCommand` and `executeCommand` do this task.

Command Method | JavaScript Design Patterns

The command method is a behavioral design pattern that encapsulates an incoming request into a standalone object. This object contains all the necessary information to perform a request including the method to call and parameters.

Important Topics for the Command Method in JavaScript Design Patterns

Why do the we use Command Method?
Command Method example in JavaScript Design Patterns
Advantages of the Command Method in JavaScript Design Patterns
Disadvantages of the Command Method in JavaScript Design Patterns

Tags:

Why do the we use Command Method?

Advantages of the Command Method in JavaScript Design Patterns

Command Method example in JavaScript Design Patterns

Implementation of Command Method using JavaScript:

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Components of Command Method

Diagrammatic Representation of Command Method:

Command Method | JavaScript Design Patterns

Similar Reads

Contact Us