tobireif.com / posts Twitter Logo

Observing Changes using ES6 Proxies

ES6 Proxies can be used to observe changes / react to changes when an object property gets set through the proxy.

Decide for yourself whether & when it's appropriate to observe changes.

In this Twitter thread Addy Osmani lists some use cases for ES6 Proxies.

Always consider whether it is sensible to have mutable data, or whether immutable data structures are more appropriate. By the way, ES6 Proxies can be used to implement immutable data structures :) Here in this post I'll show one way of observing a mutable data object.

As of March 2016, ES6 Proxies work in Chrome, Firefox, and in Edge.

Dear future reader and user of other browsers, it might by now also work in your browser. There's a compatibility table at
kangax.github.io/compat-table/es6/#test-Proxy .

The code:

Run the example (repeatedly):

Output:

 

That's it! One way of observing property changes.

If you enjoyed this post, follow me on Twitter Twitter Logo