How to detect when an object changes in JavaScript
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