Applying Behavioral Patterns in JavaScript Scenarios | CodeSignal Learn

Applying Behavioral Patterns in JavaScript Scenarios | CodeSignal Learn

The Command pattern encapsulates a request as an object, supporting the parameterization of clients with different requests and enabling undoable operations. Here’s a quick sample demonstrating how to encapsulate the action of showing a message in the chat room:

We define a base Command class with an execute method that needs to be implemented by subclasses. This serves as the blueprint for all command objects, ensuring they adhere to a common execution interface.

JavaScript

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

Next, we define a ChatRoom class with a method to display and propagate messages. The sendMessage function in the ChatRoom class will be defined further down below.

class ChatRoom {
    showMessage(message) {
        console.log(`Message: ${message}`);
    }
}

The ChatCommand class inherits from Command and encapsulates the action of showing a message. When creating a ChatCommand, you set the message and the chat room where the message will be displayed, then execute this command to display the message.

Now, we integrate the Observer pattern to enable our chat application to notify users about incoming messages. Each User instance represents an observer that can receive messages, while the ChatRoom acts as the subject that notifies its users.

class ChatCommand extends Command {
    constructor(chatRoom, message) {
        super();
        this.chatRoom = chatRoom;
        this.message = message;
    }

    execute() {
        this.chatRoom.showMessage(this.message);
        this.chatRoom.sendMessage(this.message);
    }
}

We define a User class where each user can receive and print messages. This will allow users to get real-time updates from the chat room.

class User {
    constructor(name) {
        this.name = name;
    }

    receiveMessage(message) {
        console.log(`${this.name} received message: ${message}`);
    }
}

Here, the ChatRoom class is enhanced to hold a list of users and send messages to all users by iterating through the list, simulating the observer notification. Adding the Observer pattern ensures that new messages are immediately communicated to all users.

class ChatRoom {
    constructor() {
        this.users = [];
    }

    addUser(user) {
        this.users.push(user);
    }
        
    showMessage(message) {
        console.log(`Message: ${message}`);
    }

    sendMessage(message) {
        this.users.forEach(user => user.receiveMessage(message));
    }
}

Now, we will combine both the Command and Observer patterns to create a functional chat application. You will use commands to handle user inputs and observers to manage message broadcasting. This integration increases the modularity and clarity of the application structure, making it easier to maintain and extend.

JavaScript

class ChatCommand extends Command {
    constructor(chatRoom, message) {
        super();
        this.chatRoom = chatRoom;
        this.message = message;
    }

    execute() {
        this.chatRoom.showMessage(this.message);
        this.chatRoom.sendMessage(this.message);
    }
}

JavaScript

class ChatRoom {
    constructor() {
        this.users = [];
    }

    addUser(user) {
        this.users.push(user);
    }
        
    showMessage(message) {
        console.log(`Message: ${message}`);
    }

    sendMessage(message) {
        this.users.forEach(user => user.receiveMessage(message));
    }
}

Intermediate Steps to Combine the Patterns:

Defining the ChatRoom let chatRoom = new ChatRoom(); Creating User Instances let user1 = new User("Alice"); let user2 = new User("Bob"); Adding Users to the ChatRoom chatRoom.addUser(user1); chatRoom.addUser(user2); Creating and Executing a ChatCommand let chatCommand = new ChatCommand(chatRoom, "Hello, everyone!"); chatCommand.execute(); In this way, the chat room acts as a central hub, commands encapsulate user actions such as sending messages, and users observe and receive messages from the chat room.

Below is the combined structure of our chat application, illustrating how the Command and Observer patterns work together:

JavaScript

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

class User {
    constructor(name) {
        this.name = name;
    }

    receiveMessage(message) {
        console.log(`${this.name} received message: ${message}`);
    }
}

class ChatRoom {
    constructor() {
        this.users = [];
    }

    addUser(user) {
        this.users.push(user);
    }

    showMessage(message) {
        console.log(`Message: ${message}`);
    }

    sendMessage(message) {
        this.users.forEach(user => user.receiveMessage(message));
    }
}

class ChatCommand extends Command {
    constructor(chatRoom, message) {
        super();
        this.chatRoom = chatRoom;
        this.message = message;
    }

    execute() {
        this.chatRoom.showMessage(this.message);
        this.chatRoom.sendMessage(this.message);
    }
}

const chatRoom = new ChatRoom();
const user1 = new User("Alice");
const user2 = new User("Bob");

chatRoom.addUser(user1);
chatRoom.addUser(user2);

const chatCommand = new ChatCommand(chatRoom, "Hello, everyone!");
chatCommand.execute();
// Outputs:
// Message: Hello, everyone!
// Alice received message: Hello, everyone!
// Bob received message: Hello, everyone!