Wednesday, 20 December, 2017 UTC


Summary

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.
The post Watch for Object Changes with JavaScript appeared first on David Walsh Blog.