Proxy & Reflect API in Javascript

These both feature appears in ES6, both work very well together !

First,

Proxy

A proxy is an exotic object, he doesn't have properties ! It wraps the behavior of an object. It needs two arguments.

const toto = new Proxy(target, handler)

target: is the object that will be proxied/wrapped by the proxy.

handler: is the configuration of the proxy, it will intercept operation on the target (get, set ect..), you will see example !

Thanks to proxy you can create traps like this

const toto = { a: 55, b:66 }
const handler = {
 get(target, prop, receiver) {
   if (!!target[prop]) {
     return target[prop]
    }
    return `This ${prop} prop don't exist on this object !`
  }
}

const totoProxy = new Proxy (toto, handler)

totoProxy.a // 55
totoProxy.c // This c prop don't exist on this object !

Each internal Object 'method' has his own Target function

Bellow it's a list of object methods equivalent into Target

object method	target
object[prop]	get
object[prop] = 55	set
new Object()	construct
Object.keys	ownKeys

Here the full list 🔗 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy

Parameters of Target function can change depending on the function.

For example, for get function take (target, prop, receiver(proxy itself)) but for set function it's (target, prop, value (to set), receiver)

Example of usage

We can create 🔓 secret property !

const toto = {
   name: 'toto',
   age: 25,
   _secret: '***'
}

const handler = {
  get(target, prop) {
   if (prop.startsWith('_')) {
       throw new Error('Access denied')
    }
    return target[prop]
  },
  set(target, prop, value) {
   if (prop.startsWith('_')) {
       throw new Error('Access denied')
    }
    target[prop] = value
    // set methods return boolean,
    // in order to let us know if the value has been correctly set !
    return true
  },
  ownKeys(target, prop) {
     return Object.keys(target).filter(key => !key.startsWith('_'))
  },
}

const totoProxy = new Proxy (toto, handler)
for (const key of Object.keys(proxy1)) {
  console.log(key) // 'name', 'age'
}

Reflect

Reflect is a static class that simplifies creation of proxy.

Each internal Object method has his own Reflect methods

object method	Reflect
object[prop]	Reflect.get
object[prop] = 55	Reflect.set
new Object()	Reflect.construct
Object.keys	Reflect.ownKeys

Here the full list 🔗 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect

❓ Why use it ? Because it works very nicely with Proxy ! It accepts the same parameters as handler of proxy !

const toto = { a: 55, b:66 }

const handler = {
  get(target, prop, receiver) {
   // Equal to target[prop]
   const value = Reflect.get(target, prop, receiver)
   if (!!value) {
      return value 
   }
   return `This ${prop} prop don't exist on this object !` 
  },
  set(target, prop, value, receiver) {
     // Equal to target[prop] = value
     // Reflect.set return boolean, it's perfect
     // since set handler need to return boolean
     return Reflect.set(target, prop, receiver)
  },
}

const totoProxy = new Proxy (toto, handler)

So as you can see Proxy and Reflect api are usefull but you will not use it every day, it can be nice to use it in order to make traps or hide some object property. Another solution exist for that like Symbol for example.

If you are using Vue Framework, try to modify a props object of component, it will trigger warn log from Vue, this feature is using Proxy :) !

---

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!