Functional JavaScript: Function Decorators Part 2 #JavaScript

geralt @ pixelbay

The Beginning

Function decorators allow you to enhance existing functions without modification to the original function.

In Part 1, I demonstrated how function decorators can transform a callback into a promise and back again. But function decorators are much more useful than the limited scope of callbacks and promises, so I thought this subject could use a reboot.

Part 1:

Function decorators: Transforming callbacks into promises and back again_Every day that I work in JavaScript-land, I stumble across a mixture of callbacks, promises or async/await. I have my…_hackernoon.com

I think showing a bunch of examples will be the best way to showcase function decorators, so this article will be a little light on words and focus more on the code.

The Hello World of a function decorators

The basic function decorator is incredibly simple (it does nothing).

To support n-arity functions we can expand it to this (still does nothing).

Now let’s create and use a helloWorld decorator to decorate the add function.

Use this base decorator as a template for any function decorator you want to create.

Logging Function Decorator

Easily wrap your logging logic around existing functions.

Homework: How would you modify this to also support Asynchronous functions? For a hint, look below inside the timed function decorator.

Timer Function Decorator

Basic timer function that works with both synchronous and asynchronous code.

Line 15 checks if the value is a promise and puts the return value into a then instead of returning it.

Function Parameter Guard Decorator

Guard all parameters against null or undefined.

Homework: How could this decorator be enhanced? How would you add argument names? How would you guard against only some arguments?

Exception Handling

Instead of throwing an exception, you can return an object that will contain either the value or an error. This is similar to how the Either monad handles it’s values. (don’t worry about monads right now).

Homework: Research and learn to use the Either Monad. Change this code to return an Either.

Fetch JSON Function Decorator

When using fetch it is common to see code like this sprinkled throughout your codebase:

To get at that json, you always have to call response.json() first.

Currying

If you are familiar with currying functions like Ramda’s curry, then you may already be familiar with function decorators.

Note: I recommend using a more mature curry function, like the one from Ramda. Even though this one will work just fine, it is provided for example only.

Next.js browser check

In a Next.js project I was creating, I had to limit a couple of functions to only executing on the browser side. I was able to do this cleanly with a simple function decorator.

Multiple Ways to Decorate

There are a few ways to decorate functions. How you decide to use decorators will depend on your use-case.

Combining Function Decorators

Because each decorator also returns a function, function decorators can easily be combined to create one mega function.

You can also use function composition to combine decorators

React

React and the entire ecosystem is filled with function decorators. If you have used React, there’s a high likely-hood you have already used function decorators. react-redux's connect is a function decorator. redux’s bindActionCreators is a function decorator.

The End

Function decorators are powerful tools used to enhance existing functions. They are not something new and if you haven’t already used a function decorator, it is very likely you will use them in your near future.

Even though they are so powerful and easy to create, I don’t see many people creating function decorators in their code. This tells me function decorators are under utilized tool that are worthy of more exploration.

Don’t forget to do the homework in this article!

I would love to hear how would you use function decorators today to improve your codebase in the comments below! 😃

Cheers!

Follow me

Twitter: https://twitter.com/joelnetMedium: https://medium.com/@joelthoms/latestDev.to: https://dev.to/joelnetLinkedIn: https://www.linkedin.com/in/joel-thoms/