JavaScript — Make your Code Cleaner with Decorators

Netanel Basal
Jan 19, 2017 · 2 min read

When working with JavaScript, you sometimes need to use the setTimeout function to force some piece of code to run at the next tick. If you are working with Angular, for example, you probably already familiar with this kind of things.

The setTimeout “hack”:

setTimeout(() => {  ...Code...
This Code will run at the next tick.
}, 0);

Call me crazy, but I hate to write code like this, especially when the setTimeout is not something that comes from my need. I want this to be cleaner. So what if we could abstract the setTimeout function to a decorator.

Let’s create a method decorator named timeout to clean our code.

In typescript or babel a method decorator is just a function that takes three parameters.

The target:

Either the constructor function of the class for a static member, or the prototype of the class for an instance member.

The key:

The name of the member.

The descriptor:

The Property Descriptor for the member.

In our case, we also need to pass an argument to our decorator ( the number of milliseconds, that by default will be zero), so we need to use a Decorator Factory:

A Decorator Factory is simply a function that returns the expression that will be called by the decorator at runtime.

Next, we can get a reference to the original method from the descriptor value property.
Then we are overriding the original value and creating a new function that wraps the original with setTimeout.

Now we can use our decorator like this:

Much better and you cannot say it does not look cooler 😎.

Conclusion:

You can leverage decorators in your apps and create powerful things with them. Decorators are not only for frameworks or libraries, so be creative and start using them. You can explore the different decorators here.

Frontend Weekly

It's really hard to keep up with all the front-end…

Netanel Basal

Written by

I'm a Frontend Architect at Datorama, blogger, open source maintainer, creator of Akita and Spectator, Husband, and Father.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Netanel Basal

Written by

I'm a Frontend Architect at Datorama, blogger, open source maintainer, creator of Akita and Spectator, Husband, and Father.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

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