Summary: This is probably going to be a long read. I recently came across a problem on which involved upgrading a marine game unit and it kind of gave me the thought for writing this. We can see decorators everywhere. Although this pattern appears in many large code bases and popular books, they give the example of mostly using them with Object oriented UI toolkits(gof) or File Streaming(Java I/O-Head first design pattern) etc. I have tried to compile a few examples for Javascript.

Feel free to jump to any of these sections



  1. Decorators in JS
  2. Decorators in ES6
  3. Decorators in ES7, Typescript and Angular 2.
  4. Decorators in Angular 1.

Note: If you are not familiar with the design pattern I would encourage you to read this. Design Pattern

Brief Introduction

The Gof book calls this a structural pattern aka Wrapper. The Intent being

Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality. — Gof




How to use them in Javascript?

Decorating a Tea
Let’s illustrate the decorator pattern with an example: decorating a Tea. You start with the prepare() method.

Now let’s implement a getDecorator() method which will be used to add extra decorators. The decorators will be implemented as constructor functions, and they’ll all inherit from the base tree object.

Now let’s create the first decorator, Milk(). The Milk objects also provide a decorate() method, but they make sure they call their parent’s decorate() first.

Finally, running the prepare() method: tea.prepare();
logs the following as expected
“heating water, adding tea powder”
‘Pouring some milk’
‘Adding masala’
‘Adding mint leaves’

How to use in ES6?

It is much easier to implement the design pattern in ES6 since we are not using any other patterns to do stuff like inheritance.
Lets look at another example, which is upgrading your weapons or basic units in game development.

Following Code taken from a CodeWars problem. Marine gets a WeaponUpgrade, it increases the damage by 1, and if it is an ArmorUpgrade then increase the armor by 1.

You have 3 classes:

Marine: has a damage and an armor properties
MarineWeaponUpgrade and MarineArmorUpgrade: upgrades to apply on marine. Accepts a Marine in the constructor and has the same properties as the Marine

Decorators in the future of JS…

I like the fact that most languages are evolving to an extent where the common design patterns are not really patterns anymore, but language features.

Note: According to spec editor Brian Terlson, ES2016 or ES7 will only add Array.prototype.includes and the exponentiation operator (**). The decorator is currently in stage-Zero proposal

This is more like in far future, maybe in ES 2017 -18 we can see this. We can already see it in Typescript although, which means it is already being used by many people for Angular 2.

Lets look at how we can use it now

An ES2016 decorator is an expression which returns function and can take a target, name and property descriptor as arguments. You apply it by prefixing the decorator with an @ character and placing this at the very top of what you are trying to decorate. Decorators can be defined for either a class or property.

Decorating a property
Let’s take a look at a basic Person class:

this gets attached to the Person.prototype roughly like this..

Object.defineProperty(Person.prototype, ‘greet’, {
value: specifiedFunction,
enumerable: false,
configurable: true,
writable: true

Now imagine we want to make our greet method not writable.

Decorating a class
we can simply decorate the above Person class with something like, knows ‘Kalaripayatu’

Decorators in Angular 1

In Angular we have a decorator method provided by Angular team. These are functions that allow a service, directive or filter to be modified prior to its usage.

we can an example below where we are extending the $log service where we have extended the original warn with the decorated warn.

I am going keep this simple and not give every flavor of how it can be used in Angular.

Few Links