Not the Object—But the Gate: Understanding Proxy in JavaScript

At first, objects in JavaScript feel simple.

You read a property.

You set a value.

Everything behaves directly.

const user = { name: "Rishi" }

user.name // "Rishi"
user.name = "Indana"

There is no in-between.

No place to observe.

No place to intervene.

The operation goes straight through.

And for a long time, that was the limitation.

The Missing Layer

What if you wanted to know:

• when a property is accessed
• when a value changes
• when something is deleted

Or more subtly:

What if you wanted to control those actions?

Before Proxy, JavaScript had no built-in way to do this.

Objects were passive.

They held data, but they couldn’t respond to how they were used.

Introducing a Gate

A Proxy changes that.

It doesn’t modify the object itself.

It wraps it.

const target = { name: "Rishi" }

const proxy = new Proxy(target, {
  get(target, key) {
    console.log("accessing", key)
    return target[key]
  }
})

Now, something has shifted.

Access is no longer direct.

It passes through a gate.

proxy.name

Before the value is returned, the Proxy gets involved.

It sees the access.

It can log it, modify it, or even block it.

Access Becomes an Event

This is the real transformation.

Reading a property is no longer just retrieval.

It becomes an event.

Something that can be intercepted.

Something that can be shaped.

And this applies to more than just reading.

Setting a value:

set(target, key, value) {
  target[key] = value
  return true
}

Checking existence:

has(target, key) {
  return key in target
}

Deleting properties.

Listing keys.

All of these operations can be observed and redefined.

The Object Is Still There

It’s important to notice what hasn’t changed.

The original object still exists.

target.name

Accessing it directly bypasses the Proxy entirely.

No interception.

No tracking.

No control.

This reveals something crucial:

A Proxy does not change the data—it changes the path to the data

Where Reactivity Emerges

This idea becomes clearer when you think about systems like Vue.

When you access a reactive value:

• Vue tracks the access
• Vue knows what depends on it

That’s possible because access goes through a Proxy.

If you bypass that path—by accessing the original object—

the system becomes blind.

Nothing is tracked.

Nothing reacts.

Not Just Observation—Transformation

A Proxy is not limited to watching.

It can redefine behavior entirely.

const proxy = new Proxy({}, {
  get() {
    return 42
  }
})

Now:

proxy.anything // 42

The relationship between key and value is no longer fixed.

The object becomes dynamic.

It responds to how it is used.

A Shift in Perspective

Before Proxy, objects were containers.

After Proxy, they become interfaces.

Not just storing data—

but mediating interaction.

The difference is subtle, but powerful.

You’re no longer working with raw values.

You’re working with a system that can interpret access.

The Risk of Bypassing

Because the Proxy sits between you and the object, consistency depends on using it.

If you mix access paths:

• sometimes through the Proxy
• sometimes directly to the target

You break the model.

Some operations are tracked.

Others are invisible.

The system becomes unpredictable.

A Final Thought

Proxy doesn’t make objects more complex.

It makes interactions explicit.

It introduces a layer where behavior can be observed, controlled, and even redefined.

What used to be a direct line—

becomes a controlled gateway.

And once you see that,

you stop thinking of objects as static data…

and start seeing them as something that can respond to how they are touched.