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 Sorhus 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.