geralt @ pixelbay The Beginning allow you to enhance existing functions without modification to the original function. Function decorators 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: _Every day that I work in JavaScript-land, I stumble across a mixture of callbacks, promises or async/await. I have my…_hackernoon.com Function decorators: Transforming callbacks into promises and back again 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 decorator to decorate the function. helloWorld add 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. How would you modify this to also support Asynchronous functions? For a hint, look below inside the function decorator. Homework: timed 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 instead of returning it. then Function Parameter Guard Decorator Guard all parameters against null or undefined. How could this decorator be enhanced? How would you add argument names? How would you guard against only some arguments? Homework: 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). Research and learn to use the . Change this code to return an Either. Homework: Either Monad 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 first. response.json() 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 , like the one from Ramda. Even though this one will work just fine, it is provided for example only. curry function 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. 's is a function decorator. ’s is a function decorator. react-redux connect redux bindActionCreators 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: Medium: Dev.to: LinkedIn: https://twitter.com/joelnet https://medium.com/@joelthoms/latest https://dev.to/joelnet https://www.linkedin.com/in/joel-thoms/

BUNCH

Fetch

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Functional JavaScript: Function Decorators Part 2 #JavaScript

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Functional JavaScript: Function Decorators Part 2 #JavaScript

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES