Intercepting Object Operations

Introduction: Why Intercept Object Operations?

Welcome to the first lesson of our course on Meta-Programming and Advanced Integration Patterns . In this course, we are going to explore how to write code that treats other code as data. This is a powerful skill that allows you to create more flexible and dynamic applications. In standard programming, we usually interact with objects directly. We read a property, change a value, or delete a key. Meta-programming changes this by allowing us to step in the middle of these actions. This is called " interception ." By intercepting these operations, we can add extra logic without changing the original object or the code that uses it. In the real world, this is very useful for several reasons. You might want to log every time a piece of data is changed for debugging purposes. You could also use it to validate data, ensuring that a user does not set a price property to a negative number. It is also great for access control, where you can prevent certain parts of your program from reading sensitive information. In this lesson, we will focus on building a logging tool that tracks everything happening to an object.

The Proxy Object: Wrapping A Target

To start intercepting operations, JavaScript provides us with a special object called a Proxy . You can think of a Proxy as a wrapper or a "middleman" for another object. The object being wrapped is called the target . Once an object is wrapped, any interaction with that object must go through the Proxy first. To create a Proxy, we use the new Proxy(target, handler) syntax. The target is the original object we want to watch. The handler is another object that contains our " traps ." JavaScript const user = { name: "Alice" }; const handler = {}; // No traps defined yet const proxyUser = new Proxy(user, handler); console.log(proxyUser.name); // Outputs: Alice const user = { name: "Alice" }; const handler = {}; // No traps defined yet const proxyUser = new Proxy(user, handler); console.log(proxyUser.name); // Outputs: Alice If we don't put any traps in the handler, the Proxy will just pass everything through to the target as if it weren't there.

Intercepting Property Access With Get And Set Traps

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Blocking Property Definitions With DefineProperty

There is one more trap that is closely related to set: the defineProperty trap. While the set trap intercepts normal assignments like obj.x = 1, the defineProperty trap intercepts calls to Object.defineProperty(obj, key, descriptor). This is the lower-level API that defines a property along with its descriptor — settings such as whether the property is writable, enumerable, or configurable.

Intercepting defineProperty is useful when you want to fully lock down an object. A determined caller could try to bypass your set trap by calling Object.defineProperty directly, so to build a truly read-only wrapper you must handle this trap too.

JavaScript

const handler = {
  defineProperty(target, prop, descriptor) {
    console.log(`Attempting to define: ${String(prop)}`);
    return false; // In strict mode, this rejection throws a TypeError
  }
};

const locked = new Proxy({}, handler);

// This call routes through the defineProperty trap:
Object.defineProperty(locked, "x", { value: 1 });

const handler = {
  defineProperty(target, prop, descriptor) {
    console.log(`Attempting to define: ${String(prop)}`);
    return false; // In strict mode, this rejection throws a TypeError
  }
};

const locked = new Proxy({}, handler);

// This call routes through the defineProperty trap:
Object.defineProperty(locked, "x", { value: 1 });

The trap receives the target, the property key, and the descriptor object that describes how the property should be defined. Like set, it must return a boolean indicating whether the definition was allowed. Here we simply return false instead of throwing our own error, and this is deliberate: it shows the strict-mode behavior described earlier — a rejected defineProperty automatically throws a TypeError even when you only return false. We throw explicitly (as in the set example) only when we want to attach a clear, custom message; when a plain rejection is enough, returning false is perfectly fine. You will use this trap in the practice exercises to build an object that cannot be modified in any way.

The Reflect API: Your Default Forwarder

When we use a trap, we often still want the original operation to happen after we finish our extra logic. This is where the Reflect API comes in. Reflect is a built-in object that provides methods for interceptable JavaScript operations.

Here is the overall flow of a single intercepted operation. Every read or write on the proxy follows these four steps:

text

[1] Your code         [2] Proxy            [3] Trap                [4] Target
   proxy.a      ─▶  matching trap   ─▶  log / validate   ─▶  Reflect.get(obj, …)
   proxy.a = 5      is invoked          run custom logic       forwards to real object

In words: your code reads or writes the proxy, the proxy invokes the matching trap, the trap runs your custom logic (such as logging or validation), and finally the trap forwards the operation to the underlying target using a Reflect method.

While you could manually perform the operation (like using target[prop] = value), using Reflect is the professional standard for three main reasons:

Return Values: A set trap must return a boolean indicating if the assignment succeeded. Standard assignment (target[prop] = value) returns the value itself, not a boolean. Reflect.set() handles this automatically by returning true or false.
The Receiver: Traps receive a receiver argument, which is usually the proxy itself. If your object uses inheritance or getters/setters that rely on the this keyword, passing the receiver into Reflect.get or Reflect.set preserves the correct this binding so those features keep working. Passing the receiver is a sensible default for faithful forwarding; later, in the reactive-proxy lesson, we will see a specialized case where setters require us to think more carefully about whether to pass it.
Mirror Mapping: Reflect methods have the exact same names and signatures as Proxy traps. This makes it easy to "forward" the operation without worrying about syntax differences.

JavaScript

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}...`);
    // Reflect.get(target, prop, receiver) handles 
    // the prototype chain and 'this' binding correctly.
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}...`);
    // Reflect.set returns the boolean the trap requires
    return Reflect.set(target, prop, value, receiver);
  }
};

In this handler, each trap does its custom work first — logging the operation — and then forwards to the matching Reflect method. Notice how both traps accept the receiver argument and pass it straight into Reflect, which preserves the correct this binding as described above. The set trap simply returns whatever Reflect.set returns, giving us the boolean the trap requires without any extra work. This is Reflect acting as a perfect forwarder that ensures your object still behaves correctly even while you are watching it.

Introduction: Why Intercept Object Operations?

The Proxy Object: Wrapping A Target

Intercepting Property Access With Get And Set Traps

Join the 1M+ learners on CodeSignal

More Useful Traps: Has And DeleteProperty

Blocking Property Definitions With DefineProperty

The Reflect API: Your Default Forwarder

Putting It All Together: A Logging Proxy

Summary And Practice Preparation