Exploring the Decorator Pattern in JavaScript | CodeSignal Learn

Exploring the Decorator Pattern in JavaScript | CodeSignal Learn

Exploring the Decorator Pattern

Welcome! Having learned about various design patterns, you're well on your way to mastering structural design patterns using JavaScript. In this lesson, we'll explore the Decorator Pattern, an important structural pattern that allows us to add new functionalities to objects dynamically and transparently. This is particularly useful when you want to enhance the behavior of objects without modifying their core code. The Decorator Pattern enables you to wrap an object with additional behavior in a flexible and reusable way. You'll learn how to use this pattern to extend the functionality of objects in a clean and maintainable manner. For example, let's consider a simple coffee ordering system. By the end of this lesson, you will be able to create a basic Coffee class and implement decorators like MilkDecorator and SugarDecorator to add features to the basic coffee object.

Understanding the Decorator Pattern

To understand the Decorator Pattern, let's think about a coffee shop where you can customize your coffee with various add-ons. Consider a scenario in a coffee shop where you start with a simple cup of coffee and then enhance it with additional ingredients like milk, sugar, or whipped cream. Simple Coffee (Core Component): The basic coffee serves as the core component. It has fundamental properties, such as description and cost. Milk (Decorator): Adding milk to the coffee decorates it with additional features like an extra description ("Milk") and additional cost. Sugar (Decorator): Similarly, adding sugar will decorate the coffee with a sugar description and added cost. Multiple Decorations: You can layer decorators. For instance, you can first add milk and then add sugar to the already milk-decorated coffee. Each decorator wraps the core component or another decorator, enhancing its behavior. In this structure, each decorator extends the functionality of the original component dynamically. You start with a basic coffee and, by wrapping it with different decorators, you can create complex coffee orders. For example, if you have a simple coffee object and want to create a coffee with milk and sugar, you don't need to create a new class for every combination of coffee. Instead, you can layer existing decorators: JavaScript let simpleCoffee = new SimpleCoffee(); let milkCoffee = new MilkDecorator(simpleCoffee); let milkAndSugarCoffee = new SugarDecorator(milkCoffee); This allows you to dynamically add or remove functionality to objects without altering their structure, leading to more modular and maintainable code.

Sign up

Join the 1M+ learners on CodeSignal

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

We start by defining a Coffee class. JavaScript does not have built-in abstract class support, so we'll simulate it using conventions where unimplemented methods throw errors. The SimpleCoffee class provides the implementation for the cost method.

JavaScript

class Coffee {
    getDescription() {
        return "Coffee";
    }

    cost() {
        throw new Error("This method should be overridden!");
    }
}

class SimpleCoffee extends Coffee {
    cost() {
        return 2.0;
    }
}

// Verify SimpleCoffee
let myCoffee = new SimpleCoffee();
console.log(`Description: ${myCoffee.getDescription()}, Cost: ${myCoffee.cost()}`);
// Description: Coffee, Cost: 2.0

Next, we create a CoffeeDecorator class that also extends Coffee. It takes an instance of Coffee and delegates calls to getDescription and cost methods to the wrapped instance.

JavaScript

class CoffeeDecorator extends Coffee {
    constructor(decoratedCoffee) {
        super();
        this.decoratedCoffee = decoratedCoffee;
    }

    getDescription() {
        return this.decoratedCoffee.getDescription();
    }

    cost() {
        return this.decoratedCoffee.cost();
    }
}

// Usage example for CoffeeDecorator

let simpleCoffee = new SimpleCoffee();
let decoratedCoffee = new CoffeeDecorator(simpleCoffee);

console.log(`Description: ${decoratedCoffee.getDescription()}, Cost: ${decoratedCoffee.cost()}`);
// Description: Coffee, Cost: 2.0

Following this, we extend CoffeeDecorator to create a MilkDecorator class. It overrides the getDescription and cost methods to add the description and cost of milk to the original coffee.

JavaScript

class MilkDecorator extends CoffeeDecorator {
    getDescription() {
        return `${this.decoratedCoffee.getDescription()}, Milk`;
    }

    cost() {
        return this.decoratedCoffee.cost() + 0.5;
    }
}

// Add MilkDecorator
let myCoffeeWithMilk = new MilkDecorator(myCoffee);
console.log(`Description: ${myCoffeeWithMilk.getDescription()}, Cost: ${myCoffeeWithMilk.cost()}`);
// Description: Coffee, Milk, Cost: 2.5

Similarly, we create a SugarDecorator class by extending CoffeeDecorator. This decorator adds a sugar-related description and cost.

JavaScript

class SugarDecorator extends CoffeeDecorator {
    getDescription() {
        return `${this.decoratedCoffee.getDescription()}, Sugar`;
    }

    cost() {
        return this.decoratedCoffee.cost() + 0.3;
    }
}

// Add SugarDecorator
let myCoffeeWithMilkAndSugar = new SugarDecorator(myCoffeeWithMilk);
console.log(`Description: ${myCoffeeWithMilkAndSugar.getDescription()}, Cost: ${myCoffeeWithMilkAndSugar.cost()}`);
// Description: Coffee, Milk, Sugar, Cost: 2.8

Here is the complete code combining all the sections:

JavaScript

class Coffee {
    getDescription() {
        return "Coffee";
    }

    cost() {
        throw new Error("This method should be overridden!");
    }
}

class SimpleCoffee extends Coffee {
    cost() {
        return 2.0;
    }
}

class CoffeeDecorator extends Coffee {
    constructor(decoratedCoffee) {
        super();
        this.decoratedCoffee = decoratedCoffee;
    }

    getDescription() {
        return this.decoratedCoffee.getDescription();
    }

    cost() {
        return this.decoratedCoffee.cost();
    }
}

class MilkDecorator extends CoffeeDecorator {
    getDescription() {
        return `${this.decoratedCoffee.getDescription()}, Milk`;
    }

    cost() {
        return this.decoratedCoffee.cost() + 0.5;
    }
}

class SugarDecorator extends CoffeeDecorator {
    getDescription() {
        return `${this.decoratedCoffee.getDescription()}, Sugar`;
    }

    cost() {
        return this.decoratedCoffee.cost() + 0.3;
    }
}

// Example usage
let myCoffee = new SimpleCoffee();
console.log(`Description: ${myCoffee.getDescription()}, Cost: ${myCoffee.cost()}`);

let myCoffeeWithMilk = new MilkDecorator(myCoffee);
console.log(`Description: ${myCoffeeWithMilk.getDescription()}, Cost: ${myCoffeeWithMilk.cost()}`);

let myCoffeeWithMilkAndSugar = new SugarDecorator(myCoffeeWithMilk);
console.log(`Description: ${myCoffeeWithMilkAndSugar.getDescription()}, Cost: ${myCoffeeWithMilkAndSugar.cost()}`);

// Outputs:
// Description: Coffee, Cost: 2.0
// Description: Coffee, Milk, Cost: 2.5
// Description: Coffee, Milk, Sugar, Cost: 2.8