Proxy & Reflect API in Javascript
Tags: javascript, typescript, node, webdev
Published: 2020-12-16 17:29:12

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.

```js
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

```js
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 !

```js
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 !

```js
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](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

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

And you can mark 🔖 this article!