[{"id":"cG9zdDoxMzg=","slug":"the-powerful-es6-proxy-object","title":"The powerful ES6 proxy object","content":"\n

Today: yet another ES6 feature that I think most people don’t know about.

\n\n\n\n

“The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).”
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

\n\n\n\n

\"\" — Photo by Alina Grubnyak on Unsplash

\n\n\n\n

Let’s dive right in! 🏄‍♂️

\n\n\n\n

Basic example:

\n\n\n\n

const handler = {\n    get: (obj, key) => key in obj ? obj[key] : 42\n}\n\nconst proxy = new Proxy({a: 1}, handler)\n\nconsole.log(proxy.a, proxy.b) // 1 42

\n\n\n\n

We start with a plain object {a: 1} and we assign it a handler. Our handler intercepts the get statement of a normal object and we can define our own custom logic for it. In this case we return the value if it exists, otherwise a 42.

\n\n\n\n

We can se that calling proxy.b will output the 42, as it is not set in the root object.

\n\n\n\n

The handler

\n\n\n\n

The second argument of the Proxy function is what is called the handler. This is simply an object with functions that define the logic of the operations, which are called traps (as they get triggered). The available traps are as follows:

\n\n\n\n

get
set
has
deleteProperty
ownKeys
apply
construct

\n\n\n\n

There are a few more, but these are the basic ones. Here is the full list.

\n\n\n\n

Some practical examples

\n\n\n\n

var handler = {\n\tset: (obj, key, value) => {\n\t\tif (key === 'wheels')\n\t\t\tif (!Number.isInteger(value) || value % 2 !== 0)\n\t\t\t\tthrow new Error('Wheels need to come in pairs')\n\t\tobj[key] = value\n\t}\n}\n\n// 🚗\nvar car = new Proxy({}, handler)\n\ncar.wheels = 4\ncar.wheels = 3 // Throws an error

\n\n\n\n

Here we can see that we can define constrains for the setter. In this case we say that the key wheels needs to be and integer and a multiple of 2. This is a trivial example, but we can imagine how useful this can be with forms.

\n\n\n\n

const validators = {\n\tusername: /^[A-z]{3,}$/,\n\tpassword: /(?=.*[\\d]).{8,}/\n}\n\nconst handler = {\n\tset: (obj, key, value) => {\n\t\tif (key in validators && validators[key].test(value))\n\t\t\tobj[key] = value\n\t\telse\n\t\t\tthrow new Error('Invalid input')\n\t}\n}\n\nconst form = new Proxy({}, handler)\n\nform.username = 'abc'\nform.username = 'this contains spaces' // -> Error\n\nform.password = 'atleast1digit'\nform.password = 'withoutanydigitthiswillthrowanerror' // -> Error\n\nform.something = true // -> Error, since it does not exist in the validator object

\n\n\n\n

In this example we can validate an object from a form for example. We have a validator object that contains some regex. The Proxy then only allows keys that are inside of the validator and only if they pass the corresponding regex. Vary handy 👌

\n\n\n\n

In real life

\n\n\n\n

This only available in ES6 (ES2015) but ~92% of the browsers support it. Some real life applications that make use of this are MobX (since v5.0).

\n\n\n\n

In MobX this allows the developer to skip the tedious mapStateToProps and mapDispatchToProps and just let MobX handle it. Since with the help of proxies MobX can know what parts of the state are being used by listening on the get trap of the state and can then only render the components when the props they are using in the render() function are being used.

\n\n\n\n

There a small package that does the same for the redux world: https://github.com/dai-shi/reactive-react-redux

\n\n\n\n

I hope this helped and was interesting! 👋

\n","status":"publish","date":"2019-05-31T16:03:55","modified":"2020-09-22T20:47:03","tags":{"nodes":[{"id":"dGVybToyMA==","slug":"es6","name":"es6","count":1},{"id":"dGVybTozMQ==","slug":"javascript","name":"javascript","count":3},{"id":"dGVybTo0NQ==","slug":"proxy","name":"proxy","count":1}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-300x200.jpg 300w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-1024x683.jpg 1024w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-150x100.jpg 150w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-768x512.jpg 768w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-1536x1024.jpg 1536w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-2048x1365.jpg 2048w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-500x333.jpg 500w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-800x533.jpg 800w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-1200x800.jpg 1200w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-1500x1000.jpg 1500w, https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-2000x1333.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2019/05/alina-grubnyak-1254785-unsplash-scaled.jpg"}}}]