Watch for Object Changes with JavaScript

Watching for changes to an object’s property has always been a much sought after task; many shims have been used over the years to listen to object changes.  These days we have better methods for listening to object changes:  the Proxy API.  Sindre Sorhos has created on-change, a tiny JavaScript tool that allows you to listen for changes on JavaScript objects and arrays!

on-change JavaScript

Since the on-change code is so tiny, here it is in its full glory:

 'use strict'; module.exports = (object, onChange) => { const handler = { get(target, property, receiver) { try { return new Proxy(target[property], handler); } catch (err) { return Reflect.get(target, property, receiver); } }, defineProperty(target, property, descriptor) { onChange(); return Reflect.defineProperty(target, property, descriptor); }, deleteProperty(target, property) { onChange(); return Reflect.deleteProperty(target, property); } }; return new Proxy(object, handler);
};

The onChange function returns a proxy which you’ll use to make any object changes.

Using on-change

Pass onChange the object you’d like to spy on and a change handler function:

let j = { a: 1
}; // Upon change, save to server
let changeable = onChange(j, () => save(j));

Then use that Proxy to change properties and get notified of changes:

 // Make a change that would trigger changes
changeable.a = 2; // save() is triggered! // j.a === 2

Note that the original object’s values also change — that’s the beauty of Proxy!  Also note that on-change doesn’t tell you which property changed; the use case, as Sindre describes, is saving an object (to server, etc.) when any part of an object changes.  You could also use ti for a small library with a render function, re-rendering the content whenever a property changed!

This on-change library is really nice if you don’t need to know which property changed, just that something changed.

Related Post

Rojenx is a leading concept artist who work appears in games and publications

Check out his personal gallery here

In other news …