how to create a deep proxy in javascript

index.tsx
const deepProxy = (object, handler) => {
  // Create a new Proxy object with a handler object
  return new Proxy(object, {
    // Define the get trap for property access
    get(target, property, receiver) {
      // Get the value of the property
      const value = Reflect.get(target, property, receiver);
      // If the value is an object, return a new proxy for that object
      if (typeof value === 'object' && value !== null) {
        return deepProxy(value, handler);
      }
      // Otherwise, return the value as is
      return value;
    },
    // Pass through all other traps to the handler
    ...handler
  });
};

// Test the deepProxy function
const obj = {
  a: {
    b: {
      c: 'hello world'
    }
  }
};

const proxy = deepProxy(obj, {
  // Define a trap for setting a property
  set(target, property, value, receiver) {
    // Log the property that is being set and the new value
    console.log(`setting ${property} to ${value}`);
    // Pass through the set trap to the target object
    return Reflect.set(target, property, value, receiver);
  }
});

// Access a deep property
proxy.a.b.c; // logs nothing, returns "hello world"

// Set a deep property
proxy.a.b.c = 'goodbye world'; // logs "setting c to goodbye world"
1250 chars
44 lines