Proxies in Javascript simplified

Let's rewind your school (or) college days, how creative one can be when proxying? Woah, don't tell me you haven't done any 😈 (I can share a bunch of my experiences, but definitely not here 😂)

Aren't they funny looking back today? What if I can drift the same thrill into Javascript. Have you tried morphing any existing properties/operations hiding behind a different object? Trust me, that would be cool. Let's find out how.

I came across this term when reading about Vue's Reactivity System. Vue3 uses javascript proxy to track state changes and react to them. Proxies were introduced in ES6 and allow Vue 3 to avoid some of the reactivity caveats that existed in earlier versions of Vue. Earlier, in Vue2 they were derived by object.defineproperty approach.

By the way, Sarah Drasner's take on Vue's reactivity System would never disappoint you - check the doc here if you're interested https://v3.vuejs.org/guide/reactivity.html#how-vue-tracks-these-changes

So what is a proxy?

A proxy is just an object, that can wrap another object and intercept operations on behalf (if intended).

Bla, bla... 😕 let's dive into some code & understand it better.

First, let's check the syntax,

Here, target - is the object to be wrapped. It can be anything, including functions

handler - an object with a trap method to intercept the operations (get, set, etc)

Let's have a look at a couple of practical examples where proxy can be really useful.

Default/Zero values:

If you've used golang anytime before, you might be aware of a concept called zero value. Which is nothing but, Variables declared without an explicit initial value are given their zero value.

In Javascript that's not the case, we people are addicted to undefined for some reason I guess 😜

Above one is a simple emoticon app, that returns emoji for the corresponding reaction. Here, when I try to input a reaction that doesn't exist in my data - it returns undefined. Instead, if I manage to return the reaction itself, it would be somewhat meaningful right?

Here, To intercept reading, the handler should have a method get(target, property).

It triggers when a property is read, with the following arguments:

• target – is the target object, the one passed as the first argument to new Proxy,

• property – property name

Let's see one more use case to get closer to this concept.

Basically, if you look at the above code - it behaves like a logging system that keeps a track of how many times an API is called and logs the count to the console. Similarly, we can intercept and create any sort of logging system we need. Isn't that cool?

There are plenty of other use cases to which I won't be talking here. Will leave it to you to explore more in the below link as it's already an amazing resource from Thomas Barrasso. Check out his article here - https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0

Resources:

• https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0

• https://larsgraubner.com/javascript-proxy/

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

• https://javascript.info/proxy

If you have any suggestions (as I'm new to this) or wish to discuss more on this topic please write to me at [e-mail]. I'd also love to connect with you all on Linkedin.