Reduce method declarations with JavaScript Proxy

Today I will show you how to reduce method declarations with JavaScript Proxy. As an example, I will use my own npm package “ts-checkers”. Via this package you can check any variables for specific values. Below you can see what methods the package has at the moment:

List of methods

As you can see, methods above are presenting only one side of the possible cases, but you can use each of the methods for receiving the opposite result. Like, for example Is.Not.Null() will work, you can make the same with other methods in the package, if you are interested in how it works you can see the package here.

Or read the article with step by step instruction

The ts-checkers package is just an object with “check-only” methods for data which we can call via “Is”, for example:

Example: how to use ts-checkers package via a call to “Is” object.

Below is a declaration of a method which we used in the previous example:

Method: if value equals null or ‘null’.

As we can see, we have one declaration method for checking value, and we can call the method in both cases, and how is it possible? It is possible because we used JavaScript proxy for ”Methods”, each method returns a boolean result, the only thing we need to do is change the returned result to the opposite boolean value via prefix exclamation mark. I will show you, how it is possible to implement in TypeScript below:

Step #1 — Object “Methods”

All methods must be included in one object called “Methods, and for future we will declare an interface “MethodsInterface”.

Declaration of a new constant “Methods” and a new interface “MethodsInterface”

Step #2 — Object: “Is”

For the next step we need to export and initialise a new constant with the name “Is” which will have “Methods” with spread operator and the field “Not”:

Exporting a new constant “Is”

Step #3 — JavaScript Proxy

For working JavaScript Proxy we need to set two arguments:

  1. target — is an object that we wrapped in a proxy.
  2. handler — is an object with methods that works like an interceptor.

An object with specific methods for the specific task can be added to the handler. We will use the apply function, because we want to change the result after calling the selected method. Since we want to declare “check-only” methods which will return only boolean values. We can change result to the opposite value via an exclamation mark:

Declaration and Initialisation of a new constant “NotHandler” with an apply method

Step #4 — Array of proxies

“Methods” is an object, and we cannot use the .map() method to change each method, for solving the problem, we can convert the object to an array and after that wrap each method in a JavaScript Proxy.

Declaration and Initialisation of a new constant “arrayOfProxy”

Step #5 — Object: “Not”

Now we convert our “arrayOfProxy” to an object and initialise a new constant “Not.

Declaration and Initialisation of a new constant “Not” with converting array to an object

Thank you for reading the article and if you have any comments or suggestions leave them here or create an issue in the repository.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

// from Twitter

Unit testing with Jest in A vuejs project

The JavaScript ForEach Loop

The JavaScript Array Map Function

First day with ReasonML

9 JavaScript Libraries to Increase Productivity

Concatenations Sum: JS

Five Tips From One Year of Learning React

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
Ivan Karbashevskyi

Ivan Karbashevskyi

More from Medium

Fun with Promises in Javascript

Recursive JavaScript method to process multiple directories drops in a Drag-n-drop upload operation

JavaScript Eğitimi - 1 / Değişkenler, Operatörler ve Kontrol Yapıları

Conditional (ternary) operator in Javascript