JavaScript Design Patterns — The Decorator Pattern

Arthur Frank
May 21 · 6 min read
Photo by Vincent ROMAIN on Unsplash

Quick intro

This is the third article in JavaScript Design Patterns series, where I explain Design Patterns with simple words. There is incredible amount of information on the internet, which is really confusing, dry and boring. My goal is to explain complex things in a simple and enjoyable manner.

We have already gone through following Design Patterns in JavaScript:

This time we going to cover Decorator Pattern and how to use it in JavaScript.

Real Life Example of Decorator

Photo by The Nigmatic on Unsplash

Imagine you have bought a Car. It’s a nice car — you generally happy with it. But suddenly you realised — “Man, boot is NOT big enough!” and there is a particular ride or two, where you need extra space for additional luggage.

You may consider buying or rent a Trailer, to extend current capacity of your car. In general, it will be exactly the same car, and if you need, you can use it without the Trailer. But when you do need extra boot space you can use it with the Trailer.


Problem to solve

Photo by Gabriel Crismariu on Unsplash

In programming we may face similar challenges, like we had with the Car in our story above. Imagine, you have a User Object. It’s solid well designed and is used across multiple areas of your application.

Adding any extra logic on top of it, will affect entire application and all use cases. It will be even more annoying if you only need couple of tweaks for one or two unique scenarios.

We are talking about JavaScript here so another good example will be a UI component. Let’s say you have a Button Component. It’s very well styled, it has basic logic to handle events etc. But suddenly there is just one or two cases out of hundreds, where you need a Button with a little bit of extra styles and maybe additional logic.


Decorator Pattern in JavaScript

Photo by Steve Johnson on Unsplash

Decorator Pattern is categorised as Structural. Which means its core concepts lays in assembling Objects into larger structures while keeping these structures flexible and efficient as well as not impacting original definition.

In general, if you drop all the dry parts of it, Decorator Pattern is designed to provide you with a clean way of extending abilities of your original Object or Component, without impacting its initial state or structure.

Decorator Pattern — simple diagram

First diagram is an example of codebase without Decorator being used, when requirements for additional features appeared for a specific use case.

With coloured shapes we represent Objects or Components. With Light Grey we represent use cases of these instances. With Dark Grey Shapes we show, extra features/logic, which has been added. And finally, with Dark Grey Branches we represent couple of use cases of these special features.

Diagram without Decorator by Arthur Frank

Second diagram show how quickly situation changes when we implement Decorator Design Pattern. We have nicely decoupled implementation of extra functions from main structures. Which gives us cleaner codebase, where we have kept original Objects or Components as they were designed initially.

Diagram with Decorator by Arthur Frank

Decorator Pattern — code example

Lets imagine we have following User Object.

Code Snippet by Arthur Frank

Bear in mind this is extremely simplified example and is designed just to give you an insight of the general concept.

Now consider following scenario. You need Full Name to be prefixed with person title. You may think — “ok, in this simple example I can just prefix my getFullName() output with value from title property

Code Snippet by Arthur Frank

This approach is very easy to implement — looks attractive. Though, there are few downsides to this solution. First of all, you never know, if title property may change, for example to salutation and title property may be used for something else or removed.

This approach is also quite dirty from clean code point of view. Every time you need Full Name with the Title, you will be putting this hacky solution.

Another idea which may appear in your mind is — “ok, I will just add extra method to my User Object which returns Full Name prefixed with title”. Imagine this scenario at scale of a big project. Where you deal with already big and nicely designed Objects and Components.

If you will be adding extra functionality to each implementation every time you need to satisfy new requirement, you will blow your original structures to an enormous size. And most likely you will break the first SOLID rule — Single Responsibility.

That’s right, it’s time to introduce Decorator Pattern.

Code Snippet by Arthur Frank

Code sample above represents entry point for User Decorators. You can think of it as anindex Decorator. The reason behind is that we might have multiple decorators, doing different things. In order to inject original User Object with the right methods and properties we need an entry Decorator to extend with more concrete Decorators.

Like in our simple example — prefix Full Name with the Title.

Code Snippet by Arthur Frank

In this Concrete Decorator we are overriding original getFullName() method with extra logic we need, but we are not impacting original structure.

Now let see how usage of all this beauty will look like.

Code Snippet by Arthur Frank

I hope you have got the idea. The concept of Decorator is fairly easy. Harder will be to identify at first when to implement it in the real project. I hope this article gave you some glimpses of how and when you can use Decorator Design Pattern.


One sentence summary

Read next


Wrap-up

Photo by Kelly Sikkema on Unsplash

Thank you for taking time and reading this article. I really hope, you have gained some good insights and became even better engineer.
Have a great time, do things you love and see you in the next post. 🔥

A note from the Plain English team

Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store