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;