# Week 06 Task 03: Command Pattern in JavaScript

In Week 06 Task 03, I delved deeper into the world of Design Patterns in JavaScript by implementing the Command Pattern. This pattern allows actions to be encapsulated as objects, making operations easier to manage, execute, and reverse.

The core of the Command Pattern is that it transforms a request or action into a separate object. Rather than directly invoking a method to perform an operation, a command object is created instead. This command object knows three essential things: the specific action to be performed, how to execute it, and how to undo the operation.

The implementation of the Command Pattern in my text editor involved four primary components: TextEditor (the Receiver), AppendCommand and DeleteCommand (both Command objects), and EditorInvoker (the Invoker).

The TextEditor, or Receiver, is the object that actually performs the operations. It manages the text content and provides methods such as append text, delete text, and retrieving the current text. For instance, in my TextEditor class, the append method adds text to the current content, while the delete method removes a specified number of characters from the end of the text.

The AppendCommand and DeleteCommand are the Command objects in the system. Each stores contextual information needed to execute and undo their respective operations. AppendCommand knows the text to append and the TextEditor it belongs to. When execute() is called, it appends the stored text to the editor. Undo() removes the same amount of text from the editor.

Similarly, DeleteCommand stores the deleted text and its length. When execute() is invoked, it deletes the specified number of characters from the end of the text, and undo() restores the deleted text.

The EditorInvoker, or Invoker, serves as the intermediary that executes and manages commands. It maintains a history of executed commands to facilitate the undo feature. When a command is executed via the invoker, the command's execute() method is called, performing the desired operation. The invoker also maintains a history of commands executed, enabling the undo functionality.

To illustrate, let's walk through the process of appending "Hello" to the editor:

1. We create an AppendCommand instance, passing the TextEditor and the text to append.

2. The invoker executes this command, triggering the command's execute() method.

3. The TextEditor's append() method is called, adding "Hello" to the existing text.

4. To undo this action, we invoke the invoker's undo() method. It pops the last executed command from the history and calls its undo() method, which in turn calls the TextEditor's delete() method to remove "Hello" from the text.

This structure not only separates the concerns of the invoker from the command logic but also makes the undo functionality straightforward and efficient.