Proxy In Javascript - 2019

Recently, I was reading some less famous javascript feature and I found Javascript Proxy. Before going into why, let’s understand what is it. If you already know, feel free to skip 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 do 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

Syntax

We use Proxy Class from ES6, the arguments, 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

Basic example for proxy


We made 2 objects called target and handler, target is a simple object with a message key and handler is an object that have 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 target object.

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

Validation of object key’s


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

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

API proxy object

We have used axios, and then created an instance with our baseURL, created a handler for proxy that return 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 :

Calling API proxy object

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.

Side note: The examples used can be optimised.


If anything is not clear or you want to point out something, please comment down below.

You may also like my other articles

Js ES6 Iterables and Iterators - 2019

Javascript - Generator-Yield/Next & Async-Await - 2019

This keyword In Javascript 2019 - Javascript Context

Javascript- Currying VS Partial Application 2019

Javascript Performance Test 2019 [Part-1] - for vs for each vs (map, reduce, filter, find)

Structure Node.js App - Fractal Pattern - 2019

Email

About Deepak Gupta

Deepak is profound programmer and financial educator in India. He has co-founded couple of startup from scratch and worked in more than 12 startup and big corporate with different roles.

Owing to his interest, he has been writing blogs regarding JavaScript and other framework to help people starting with it. Also, love to educate people about trading and cryptoworld in his free time.

Subscribe to our email list

More Tags Of Your Interest