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.

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:

This allows you to dynamically add or remove functionality to objects without altering their structure, leading to more modular and maintainable code.

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.

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.

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.

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

Here is the complete code combining all the sections:

Mastering the Decorator Pattern is important because it allows you to extend the functionality of objects at runtime without altering their structure. This leads to more flexible and maintainable code compared to using subclassing for every new feature. In our coffee example, you can easily add new features like milk and sugar by layering decorators, which can be combined in various ways. Whether you need to add functionality to user interface components, logging systems, or graphical rendering engines, the Decorator Pattern provides a powerful and elegant solution. Ready to see how this unfolds? Let's get started with the practice section, where you'll implement and extend the Decorator Pattern step-by-step.