Proxy in JavaScript | Part 1

Have you put a proxy for your friend in that one boring lecture and professor couldn’t tell 😂…I have. JavaScript has a similar way of applying a proxy on objects.

Proxy

A Proxy object wraps another object and intercepts operations on it. While intercepting operations like reading, writing properties on the object, the proxy may choose to handle these operations and modify results.

Proxy

Syntax: let proxy = new Proxy(target, handler);

target : the object that has to be proxied.
handler : the proxy configuration object, it may register traps. A trap is a handler for a particular kind of operation. By registering a trap handler it can intercept the operation and do its own thing.

If there is a trap for the operation onhandler only then the operation will be trapped and handled by proxy else operation directly occurs on the object itself.

Proxy

For most of the operations on objects, there are “Internal Methods” in JavaScript that describe how operation work at a low level, what proxy trap does is that it can intercept these methods and do its own thing.

Proxy visualisation

Below we show some of the “Internal Methods” and their corresponding proxy traps.

Proxy trap and corresponding Internal method

Internal Methods have some rules that our traps must follow, for eg: set the trap must return true if property setting was success else false.[[GetPrototypeOf]] must always return the target’s prototype when applied on proxy as well.

The problem statement

It is common practice to use _ is in the beginning of property name to denote a private property. You cannot get/set/loop this property. Write a proxy to achive this.

proxy question

A “set” trap
We will register a set trap on the handler to intercept write operation on the object.

Syntax: set(target, prop, value, receiver).

target : target object.
prop : property name that is being set.
value : the value of the property to be set.
receiver : the object that is utilised as in getters.

set trap

A “get” trap

We will register a get trap to prevent direct access user._password to private property. Also, we have to ensure that isCorrectpassword works correctly as it does indirect access this._password.

Syntax: get(target, property, receiver).
The arguments mean the same as above.

get trap

A “deleteProperty” trap

We will register deleteProperty so that we can't delete a private property.
Syntax: deleteProperty(target, property)

deleteProperty trap

A “ownKeys” trap

for..in, Object.keys, Object.values and other methods utilise an “Internal Method” called [[OwnPropertyKeys]] to get a list of keys. For eg:
Object.getOwnPropertyNames() to get a list of non-symbol keys,
Object.getOwnPropertySymbols() to get a list of symbol keys,
Object.keys() to get a list of non-symbol enumerable keys, etc.

They all call [[OwnPropertyKeys]] but tweak it a bit to return keys according to their use case. So we will register ownKeys(target) trap to return only public keys.

ownKeys trap

Note: Our traps must follow the rules defined for “Internal Method”. The rule defined for ownKeys with Object.keys() is that it must return non-symbol enumerable keys. Look at the example below to understand this gotcha.

ownKeys and Object.keys

A “has” trap

This trap work with the in operator that intercept [[hasProperty]] Internal Method. Let’s register a has(target, property) trap.

has trap

A “apply” trap

Until now all examples we have seen were on objects and now we will see an example of function as target.

Syntax: apply(target, thisArgs, args).
thisArgs : it is the value of this
args : it is a list of arguments for function

apply trap

The End

Now teach the Proxy you learnt here to your friend for whom you have put proxy 😂. Here is the next part of the post Part 2. Stay tuned for more content.