JavaScript Proxy for observable objects

Need to detect when object properties are read or modified without modifying the object itself.

Use Proxy to intercept object operations:

function observable(target, onChange) {
return new Proxy(target, {
set(obj, prop, value) {
const oldValue = obj[prop];
obj[prop] = value;
if (oldValue !== value) {
onChange(prop, value, oldValue);
}
return true;
},
get(obj, prop) {
const value = obj[prop];
// Deep proxy for nested objects
if (typeof value === 'object' && value !== null) {
return observable(value, onChange);
}
return value;
},
deleteProperty(obj, prop) {
delete obj[prop];
onChange(prop, undefined, obj[prop]);
return true;
},
});
}

// Usage:
const state = observable({ count: 0, user: { name: 'Alice' } }, (prop, newVal, oldVal) => {
console.log(${prop}: ${oldVal} -> ${newVal});
});

state.count = 1; // 'count: 0 -> 1'
state.user.name = 'Bob'; // 'name: Alice -> Bob'
delete state.count; // 'count: undefined -> 1'

// This is how Vue 3's reactivity system works internally

Proxy intercepts all object operations transparently. It's the foundation of modern reactivity systems (Vue 3, MobX, Solid).