How to detect when an object changes in JavaScript
April 2, 2020
You can use a JavaScript feature called a Proxy to define how properties of an object are read and set.
The Proxy
takes a target (the object that the Proxy
is wrapping), and a handler (which defines how the Proxy
should act).
Hereās an example:
const sourceObject = {}
const handler = {
get: (target, key) => {
if(typeof target[key] === "object" && target[key] !== null) {
return new Proxy(target[key], handler)
}
return target[key]
},
set: (target, prop, value) => {
target[prop] = value
console.log("A change was made!")
return true
}
}
const object = new Proxy(sourceObject, handler)
In the get
method of the Proxy
ās handler, we check whether what weāre returning is of type object
(an array, object, etc). If it is, we wrap it in a new Proxy
using the same handler as itself.
This is to ensure that all changes go through this Proxy
, and the console.log
statement runs for every change.
If we didnāt wrap objects returned from the get
method in another Proxy
, this kind of ādeeperā change would not result in a console.log
:
// continuing example from above
object.list = [] // "A change was made!"
object.list.push("foo") // no console.log statement
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects Iām working on.