Proxy & Reflect API in Javascript

Proxy & Reflect API in Javascript:

 

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

First,

Proxy

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 setfunction 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 🙂 !

from Tumblr https://generouspiratequeen.tumblr.com/post/637850210343763969

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s