Academy — Sanjib Sikder

Intercepting the Language Itself

Every time JavaScript reads a property, it performs an internal operation called [[Get]]. Every assignment performs [[Set]]. Every new call performs [[Construct]]. These operations happen silently, always, for every object.

A Proxy lets you intercept these operations and run your own code instead — or in addition. You wrap any object in a Proxy, define traps for whichever operations you care about, and the Proxy calls your trap whenever that operation is triggered.

Start by seeing the simplest possible Proxy — one that logs every property access:

JavaScript

Ctrl+Enter to run

const student = { name: "Rahul", marks: 82, subject: "Physics" };

const watched = new Proxy(student, {
get(target, key) {
console.log(`Reading: ${String(key)}`);
return target[key]; // still return the real value
}
});

console.log(watched.name);
console.log(watched.marks);
console.log(watched.subject);
console.log(watched.missing); // undefined — but still logged

new Proxy(target, handler) takes two arguments: the object to wrap, and a handler object whose methods are the traps. The original student object is untouched — the Proxy sits in front of it and intercepts.

The get and set Traps

The two most useful traps. get intercepts reads, set intercepts writes:

JavaScript

Ctrl+Enter to run

function createValidated(schema) {
  return new Proxy({}, {
    set(target, key, value) {
      const rule = schema[key];
      if (!rule) throw new Error(`Unknown field: ${String(key)}`);

      if (rule.type && typeof value !== rule.type) {
        throw new TypeError(`${String(key)}: expected ${rule.type}, got ${typeof value}`);
      }
      if (rule.min !== undefined && value < rule.min) {
        throw new RangeError(`${String(key)}: must be >= ${rule.min}`);
      }
      if (rule.max !== undefined && value > rule.max) {
        throw new RangeError(`${String(key)}: must be <= ${rule.max}`);
      }

      target[key] = value;
      return true;   // must return true to signal success
    },

    get(target, key) {
      if (!(key in target)) throw new ReferenceError(`${String(key)} has not been set`);
      return target[key];
    }

});
}

const student = createValidated({
name: { type: "string" },
marks: { type: "number", min: 0, max: 100 },
age: { type: "number", min: 5, max: 25 },
});

student.name = "Priya";
student.marks = 91;
student.age = 17;
console.log(student.name, student.marks, student.age);

try { student.marks = 150; } catch (e) { console.log(e.message); }
try { student.marks = "A+"; } catch (e) { console.log(e.message); }
try { student.unknown = 1; } catch (e) { console.log(e.message); }

function createValidated(schema) {
  return new Proxy({}, {
    set(target, key, value) {
      const rule = schema[key];
      if (!rule) throw new Error(`Unknown field: ${String(key)}`);

if (rule.type && typeof value !== rule.type) {
        throw new TypeError(`${String(key)}: expected ${rule.type}, got ${typeof value}`);
      }
      if (rule.min !== undefined && value < rule.min) {
        throw new RangeError(`${String(key)}: must be >= ${rule.min}`);
      }
      if (rule.max !== undefined && value > rule.max) {
        throw new RangeError(`${String(key)}: must be <= ${rule.max}`);
      }

target[key] = value;
      return true;   // must return true to signal success
    },

get(target, key) {
      if (!(key in target)) throw new ReferenceError(`${String(key)} has not been set`);
      return target[key];
    }

});
}

const student = createValidated({
name: { type: "string" },
marks: { type: "number", min: 0, max: 100 },
age: { type: "number", min: 5, max: 25 },
});

student.name = "Priya";
student.marks = 91;
student.age = 17;
console.log(student.name, student.marks, student.age);

try { student.marks = 150; } catch (e) { console.log(e.message); }
try { student.marks = "A+"; } catch (e) { console.log(e.message); }
try { student.unknown = 1; } catch (e) { console.log(e.message); }

The Proxy turned a plain object into a self-validating record. No class, no setter methods — just a Proxy wrapping an empty object and enforcing rules on every write.

The has Trap — Intercepting `in`

JavaScript

Ctrl+Enter to run

// A range object that responds to the 'in' operator
function range(start, end) {
  return new Proxy({ start, end }, {
    has(target, key) {
      const n = Number(key);
      return n >= target.start && n <= target.end;
    }
  });
}

const teens = range(13, 19);
const passMark = range(50, 100);
const smallPrime = range(2, 13);

console.log(15 in teens); // true
console.log(25 in teens); // false
console.log(82 in passMark); // true
console.log(45 in passMark); // false
console.log(7 in smallPrime); // true

// The proxy object itself has no numeric properties — the trap invented the behaviour
console.log(Object.keys(teens)); // ["start", "end"]

The in operator now reads as natural English: 15 in teens. The underlying object has no numeric keys at all — the trap synthesised the answer from the start and end values.

The apply Trap — Intercepting Function Calls

Proxies work on functions too. The apply trap intercepts every call:

JavaScript

Ctrl+Enter to run

function memoize(fn) {
  const cache = new Map();

return new Proxy(fn, {
apply(target, thisArg, args) {
const key = JSON.stringify(args);

      if (cache.has(key)) {
        console.log(`cache hit  (${args}) → ${cache.get(key)}`);
        return cache.get(key);
      }

      const result = Reflect.apply(target, thisArg, args);
      console.log(`computed   (${args}) → ${result}`);
      cache.set(key, result);
      return result;
    }

});
}

function slowFib(n) {
return n <= 1 ? n : slowFib(n - 1) + slowFib(n - 2);
}

const fib = memoize(slowFib);

fib(10);
fib(10); // cache hit
fib(7);
fib(7); // cache hit
fib(10); // still cached

Notice Reflect.apply — we will cover Reflect properly shortly. It calls the original function cleanly from inside a Proxy trap.

The construct Trap — Intercepting `new`

JavaScript

Ctrl+Enter to run

function singleton(ClassName) {
  let instance = null;

return new Proxy(ClassName, {
construct(target, args) {
if (!instance) {
instance = new target(...args);
console.log("Created new instance");
} else {
console.log("Returning existing instance");
}
return instance;
}
});
}

class Config {
constructor(env) {
this.env = env;
this.version = "1.0";
}
}

const SafeConfig = singleton(Config);

const c1 = new SafeConfig("production");
const c2 = new SafeConfig("development"); // ignored — returns c1
const c3 = new SafeConfig("test"); // ignored — returns c1

console.log(c1 === c2); // true
console.log(c1 === c3); // true
console.log(c1.env); // "production" — always

Reflect — The Clean Way to Call Default Behaviour

Reflect is an object with one static method for each Proxy trap — Reflect.get, Reflect.set, Reflect.has, Reflect.apply, and so on. Each method performs the default JavaScript operation.

Why use Reflect instead of doing it manually inside a trap?

JavaScript

Ctrl+Enter to run

const obj = { x: 1, y: 2 };

// Doing it manually inside a trap — fragile
const proxy1 = new Proxy(obj, {
get(target, key) {
return target[key]; // works, but loses the receiver chain
}
});

// Using Reflect — correct, maintains prototype chain
const proxy2 = new Proxy(obj, {
get(target, key, receiver) {
console.log(`get: ${String(key)}`);
return Reflect.get(target, key, receiver); // receiver matters for inherited getters
},
set(target, key, value, receiver) {
console.log(`set: ${String(key)} = ${value}`);
return Reflect.set(target, key, value, receiver);
},
has(target, key) {
console.log(`has: ${String(key)}`);
return Reflect.has(target, key);
}
});

proxy2.x;
proxy2.z = 99;
console.log("y" in proxy2);

Reflect mirrors the Proxy trap API exactly — same names, same arguments in the same order. Trap intercepts the operation; Reflect performs it. The pattern is always: intercept → do your extra work → delegate to Reflect.

A Reactive Object — How Vue and MobX Work

The set trap is how reactive frameworks detect state changes and trigger re-renders. Here is the mechanism stripped to its core:

JavaScript

Ctrl+Enter to run

function reactive(obj, onChange) {
  return new Proxy(obj, {
    set(target, key, value, receiver) {
      const old = target[key];
      const result = Reflect.set(target, key, value, receiver);

      if (old !== value) {
        onChange(key, old, value);
      }

      return result;
    },
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      // In a real framework, this is where dependency tracking happens
      return typeof value === "object" && value !== null
        ? reactive(value, onChange)   // deeply reactive
        : value;
    }

});
}

const state = reactive(
{ student: "Rahul", marks: 70, passed: false },
(key, oldVal, newVal) => {
console.log(` [change] ${key}: ${JSON.stringify(oldVal)} → ${JSON.stringify(newVal)}`);
}
);

console.log("Updating marks:");
state.marks = 82;

console.log("\nUpdating passed status:");
state.passed = true;

console.log("\nSame value — no change event:");
state.marks = 82;

console.log("\nFinal state:", state.student, state.marks, state.passed);

function reactive(obj, onChange) {
  return new Proxy(obj, {
    set(target, key, value, receiver) {
      const old = target[key];
      const result = Reflect.set(target, key, value, receiver);

if (old !== value) {
        onChange(key, old, value);
      }

return result;
    },
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      // In a real framework, this is where dependency tracking happens
      return typeof value === "object" && value !== null
        ? reactive(value, onChange)   // deeply reactive
        : value;
    }

});
}

const state = reactive(
{ student: "Rahul", marks: 70, passed: false },
(key, oldVal, newVal) => {
console.log(` [change] ${key}: ${JSON.stringify(oldVal)} → ${JSON.stringify(newVal)}`);
}
);

console.log("Updating marks:");
state.marks = 82;

console.log("\nUpdating passed status:");
state.passed = true;

console.log("\nSame value — no change event:");
state.marks = 82;

console.log("\nFinal state:", state.student, state.marks, state.passed);

Every assignment to state triggers the onChange callback — which in Vue or MobX re-renders the component that depends on that value. The component author writes state.marks = 82 and the UI updates. The Proxy is the entire mechanism.

Revocable Proxies — Proxies You Can Switch Off

Proxy.revocable creates a Proxy that can be permanently disabled:

JavaScript

Ctrl+Enter to run

const { proxy, revoke } = Proxy.revocable(
  { name: "Rahul", marks: 82 },
  {
    get(target, key) {
      return Reflect.get(target, key);
    }
  }
);

console.log(proxy.name); // works
console.log(proxy.marks); // works

revoke(); // permanently disable the proxy

try {
console.log(proxy.name); // TypeError — proxy has been revoked
} catch (e) {
console.log("Revoked:", e.message);
}

// Use case: hand a proxy to untrusted code, revoke access when done
// The untrusted code can no longer reach the target object at all

All Available Traps

A Proxy can intercept 13 operations in total. The ones you will reach for most:

Trap	Triggered by
`get`	`obj.prop`, `obj[key]`
`set`	`obj.prop = val`
`has`	`key in obj`
`deleteProperty`	`delete obj.prop`
`apply`	`fn()`, `fn.call()`, `fn.apply()`
`construct`	`new Cls()`
`ownKeys`	`Object.keys()`, `for...in`
`getPrototypeOf`	`Object.getPrototypeOf()`, `instanceof`

JavaScript

Ctrl+Enter to run

// ownKeys trap — control what properties are visible
const data = {
  name: "Rahul",
  _secret: "internal",
  marks: 82,
  _cache: {},
};

const safe = new Proxy(data, {
ownKeys(target) {
// Hide any key that starts with underscore
return Reflect.ownKeys(target).filter(k => !String(k).startsWith("_"));
},
getOwnPropertyDescriptor(target, key) {
if (String(key).startsWith("_")) return undefined;
return Reflect.getOwnPropertyDescriptor(target, key);
}
});

console.log(Object.keys(safe)); // no underscore keys
console.log(JSON.stringify(safe)); // no underscore keys
for (const k in safe) console.log(k); // no underscore keys
console.log(safe._secret); // still readable directly — ownKeys doesn't block get

What You Have Learned

Proxies are metaprogramming — writing code that controls how other code behaves at the language operation level.

The key ideas:

new Proxy(target, handler) wraps any object or function; handler methods are traps
get and set traps turn plain objects into validated, reactive, or logged data stores
has trap customises the in operator — range checks, membership tests
apply trap intercepts function calls — memoization, logging, rate-limiting
construct trap intercepts new — singletons, instance counts, factories
Reflect mirrors every trap with the default behaviour — always prefer Reflect.get(target, key, receiver) over target[key] inside a trap
Proxy.revocable creates proxies you can permanently disable — useful for capability-based access control
Vue 3's reactivity, MobX's observables, and most validation libraries are built on exactly this mechanism

Next lesson is where we move into advanced territory: Performance & the JavaScript Engine — how V8 compiles your code, what hidden classes are, why certain patterns are dramatically faster than others, and how to write JavaScript that the engine can optimise. You do not need to create the advanced folder yet — I will tell you at the start of that lesson.

Proxies & Reflect

Intercepting the Language Itself

The get and set Traps

The has Trap — Intercepting in

The apply Trap — Intercepting Function Calls

The construct Trap — Intercepting new

Reflect — The Clean Way to Call Default Behaviour

A Reactive Object — How Vue and MobX Work

Revocable Proxies — Proxies You Can Switch Off

All Available Traps

What You Have Learned

The has Trap — Intercepting `in`

The construct Trap — Intercepting `new`