En JavaScript moderno hay varias formas de observar cambios en objetos, pero la más directa y nativa es usando Proxy, que te permite interceptar y reaccionar a operaciones sobre un objeto, como modificar una propiedad.
Veamos un ejemplo:
function observeObject(obj, callback) {
return new Proxy(obj, {
set(target, prop, value) {
const oldValue = target[prop];
target[prop] = value;
// Ejecutamos el callback cuando se modifica algo
callback(prop, value, oldValue);
return true;
}
});
}
// Ejemplo de uso
const original = { nombre: 'Juan', edad: 30 };
const observado = observeObject(original, (prop, newVal, oldVal) => {
console.log(`Propiedad '${prop}' cambió de ${oldVal} a ${newVal}`);
});
observado.nombre = 'Ana'; // Se dispara el callback
observado.edad = 31; // También se dispara
Me gusto mucho, es simple y puede venir al pelo para ciertas ocaciones, pero debemos de tener en cuenta que :
- Solo observa propiedades directas, no anidadas. Si querés observar objetos dentro del objeto, hay que aplicar recursivamente el Proxy.
- No detecta borrados (como delete obj.prop) a menos que también implementes el deleteProperty trap.
- No funciona con arrays de forma intuitiva si hacés push, pop, etc., salvo que interceptes esos métodos.
