Javascript — Proxy

Recently, I was reading about some less famous Javascript features and I found Javascript Proxy.

Before going into why this is important, let's understand what is it. If you already know, feel free to skip a few paragraphs.

Proxy is an object in javascript which wraps an object or a function and monitors it via something called target. Irrespective of the wrapped object or function existence. Proxy are similar to meta programming in other languages.

There are 3 key terms we need to understand before we proceed:

1. Targets: Object or Function to be proxied.
2. Handler: The function that does something on Object or Function that is proxied.
3. Traps: These are some functions used to work on targets. Click here to read more about traps.

Below is how we defined it

We use Proxy Class from ES6, the arguments, the target is the wrap object and handler will be the function used to do some action on target using traps.

Below is a simple example of its usage

We made 2 objects called target and handler, target is a simple object with a message key and handler is an object that has a get key with a function associated with it. We pass 2 objects in proxy class and in return receive a proxy object by which we can access the message property of the target object.

Here is a small example of how to use it for validation of object values

We use an empty object as a target object and a handler that takes set a trap on the target object and do the validation. Pretty easy right!

Let's look into how we can use it to make API call wrapper.

We have used axios, and then created an instance with our base URL, created a handler for a proxy that returns an object of get, post, put, delete, patch function to be used, and at last made an API object which is a proxy object to an empty object target.

We can then use it as :

This can be extended doing validation, value correction, tracing property accesses, warning about unknown properties, negative Array indices, data binding, accessing a restful web service (method calls), revocable references, monitoring async functions, type checking and much more, Read here more

I personally found javascript proxy very use-full in restful web service, validation, monitoring async functions. I will explore more.

Side note: The examples used can be optimized.

You may also like my other articles

1. Javascript Execution Context and Hoisting
2. Javascript — Generator-Yield/Next & Async-Await 🤔
3. Understanding Javascript ‘this’ keyword (Context).
4. Javascript data structure with map, reduce, filter
5. Javascript- Currying VS Partial Application
6. Javascript ES6 — Iterables and Iterators
7. Javascript — Scopes

If you like this article, please feel free to share and help others find it!

Thank you!