Design Patterns — Decorator

In this article, we will discuss the Structural design pattern known as the Decorator. We will also go over an example of this pattern in JavaScript. Before we begin, let’s take a look at what a design pattern is, and why you should familiarize yourself with them.

Design Patterns

A Design Pattern is not a programming language, or a specific type of technology you can use. It is a paradigm, or, a pre-thought out solution to common problems you will encounter when building projects. Many scenarios you encounter when coding have probably already been encountered before. So, instead of trying to re-invent the wheel, why not just utilize a solution that has already proven itself many times over? This is why you should learn Design Patterns on your coding journey.

There are many Design Patterns, and multiple different groups of Design Patterns. There are also many resources available that can aide you in learning these common Design Patterns as well. You can also check out my previous articles here, where I have discussed other Patterns, as well as algorithms and other useful coding topics!

Decorator Design Pattern

The Decorator design pattern is a common pattern used when wanting to add additional functionalities to an already existing object. The Decorator dynamically changes the object by ‘wrapping’ around the object to add, or even override functionalities of the original object. This is a common problem you will encounter, because often times we want to change our program at runtime, rather than when it is first compiled to provide different experiences that cater the the user.

Example

A good use of the Decorator pattern would be for Security Management. Let’s say we have an application that shows employee information within a company. Most users will be able to see basic information about other employees such as their name, contact information, etc. A Decorator pattern would come in handy if you want administrators to be able to see additional employee information, such as their salary.

Key Roles

— Client: Maintains a reference to the decorated component

— Component: Object that is wrapped by the decorator to be given additional functionalities

— Decorator: Wraps around the component by keeping a reference of it, defines an interface that conforms to the components interface, and implements the additional functionality

Now that we have our example and we know the key roles of the Decorator, let’s start coding!

Component

var User = function(name) {

    this.name = name;

    this.showInfo = function() {
        console.log(`User: ${this.name}`);
    };

};

Our User component allows us to create a User object that has a name attribute, and a method to show us the name.

Decorator

var DecoratedUser = function(user, jobTitle, salary) {

    this.user = user;
    this.name = user.name;
    this.jobTitle = jobTitle;
    this.salary = salary;

    this.showInfo = function() {
        console.log(`User: ${this.name}`);
        console.log(`Job Title: ${this.jobTitle}`);
        console.log(`Salary: ${this.salary}`);
    };

};

Our DecoratedUser object takes our User object as an argument, adds additional attributes such jobTitle and salary, and overrides the showInfo method to display the additional attributes.

Client

var run = function() {

    var user1 = new User("Elijah");

    var decorated = new DecoratedUser(user1, "Software Engineer", 80000)

    user1.showInfo();
    decorated.showInfo();

};

The run function creates an instance of our User object, which is given as an argument to our DecoratedUser object, along with the additional information that our DecoratedUser object can handle. We then call the showInfo method on the original User object, then our DecoratedUser object.

Here is the difference:

user1.showInfo();
// User: Elijah

decorated.showInfo();
// User: Elijah
// Job Title: Software Engineer
// Salary: $80,000

Here, we can see the difference in the showInfo method between our User and our DecoratedUser.

Conclusion

In this article we talked about the Decorator design pattern, and also went over an example of this pattern in JavaScript. The Decorator is used to add additional functionalities to existing objects, and is great for changing how a user can interact with your application at runtime! The Decorator is not always common when coding in JavaScript due to JavaScript already being a dynamic language, but can certainly be useful in statically typed languages such as Java. I hope you learned something new throughout this article, and continue to dive deep into Software Design Patterns. Happy coding!