function logPropertyUpdates(target) { return new Proxy(target, { set(target, property, value, receiver) { console.log(`Property "${property}" changed to "${value}"`); return Reflect.set(target, property, value, receiver); }, }); } const user = logPropertyUpdates({ name: "Lew", details: { age: 24, country: "USA", }, }); user.name = "Kareem"; user.details.age = 25;
ES6 Proxies are not recursive by default. In the above example, the user object is wrapped in a Proxy, but the details property is not. Therefore, when the user.details.age property is updated, the Proxy is not triggered.
To fix this, we can make the Proxy recursive:
function logPropertyUpdates(target) { if (typeof target === "object" && target !== null) { return new Proxy(target, { get(target, property, receiver) { const value = Reflect.get(target, property, receiver); return logPropertyUpdates(value); }, set(target, property, value, receiver) { console.log(`Property "${property}" changed to "${value}"`); return Reflect.set(target, property, value, receiver); }, }); } return target; } const user = logPropertyUpdates({ name: "Lew", details: { age: 24, country: "USA", }, }); user.name = "Kareem"; user.details.age = 25;