🛡️ JavaScript Proxy — The Invisible Gatekeeper of Your Data
Imagine you built a smart digital city.
Inside this city, there are houses (objects). Each house stores important information — names, ages, locations, passwords, scores.
But instead of letting anyone walk into any house and touch anything, you place an intelligent gatekeeper at every door.
This gatekeeper checks:
- Who is trying to read information 👀
- Who is trying to change information ✍️
- Whether they are allowed 🚫
- Whether they should be logged 📝
In JavaScript, this gatekeeper is called a Proxy.
🌍 What Is a Proxy?
A Proxy is a special JavaScript object that sits between you and another object.
It lets you control:
- Reading properties
- Writing properties
- Deleting properties
- Calling functions
- Many more internal operations
Think of it like:
User → Proxy → Real Object
The Proxy can: ✔ Allow ✔ Modify ✔ Block ✔ Log
🧱 Basic Proxy Structure
const proxy = new Proxy(target, handler);
Let’s break this slowly.
const
Keyword that means: 👉 The variable cannot be reassigned later.
new
Reserved keyword used to create a new instance of a class or object.
Proxy
Built-in JavaScript class.
target
The real object you want to protect or control.
handler
An object containing special functions called traps.
Traps = rules that intercept actions.
🎭 Meet The Traps
Some popular traps:
| Trap | Runs When |
|---|---|
| get | Reading property |
| set | Writing property |
| deleteProperty | Deleting property |
| has | Checking "prop" in object |
🏠 Example Story — Student Record Gatekeeper
Let’s build one.
Step 1 — Create The Real Object
const student = {
name: "Ada",
score: 85
};
Explanation
{ }
Creates an object.
name: "Ada"
Property + value.
score: 85
Another property + value.
Step 2 — Create The Handler (Rules)
const handler = {
get(obj, prop) {
console.log(`Someone is reading ${prop}`);
return obj[prop];
},
set(obj, prop, value) {
if (prop === "score" && value > 100) {
console.log("Score cannot exceed 100");
return false;
}
obj[prop] = value;
return true;
}
};
Let’s go line by line.
get(obj, prop)
Runs when reading:
proxy.name
proxy.score
console.log()
Prints message to console.
`Someone is reading ${prop}`
Template string.
${prop}
Injects variable into string.
return obj[prop]
return
Sends value back.
obj[prop]
Bracket notation: Access property dynamically.
SET Trap
set(obj, prop, value)
Runs when writing:
proxy.score = 90
if (prop === "score" && value > 100)
if
Decision keyword.
===
Strict comparison.
&&
Logical AND.
return false
Rejects update.
obj[prop] = value
Updates real object.
return true
Confirms update worked.
Step 3 — Create Proxy
const proxyStudent = new Proxy(student, handler);
Now every interaction goes through proxy.
Step 4 — Use It
Reading
console.log(proxyStudent.name);
Output:
Someone is reading name
Ada
Valid Update
proxyStudent.score = 95;
Works.
Invalid Update
proxyStudent.score = 150;
Output:
Score cannot exceed 100
🧠 Why Proxy Is Powerful
✅ Data Validation
Prevent bad data.
Example:
- Negative age
- Score > 100
- Invalid email format
✅ Security Layer
Hide sensitive data like:
- Passwords
- Tokens
- Internal IDs
✅ Logging & Monitoring
Track:
- Who accessed data
- When data changed
✅ Framework Magic
Frameworks like Vue use Proxy for:
- Automatic UI updates
- State tracking
- Reactivity systems
🚀 Advanced Example — Custom Behavior
const user = { name: "Ken" };
const proxyUser = new Proxy(user, {
get(obj, prop) {
if (prop === "greet") {
return () => `Hello ${obj.name}`;
}
return obj[prop];
}
});
Arrow Function
() => value
Short function syntax.
Usage:
console.log(proxyUser.greet());
Output:
Hello Ken
Even though greet does not exist in original object.
Magic.
⚠️ When NOT To Overuse Proxy
Proxy can:
- Reduce performance if abused
- Make debugging harder
- Confuse beginners if used everywhere
Use when: ✔ You need control ✔ You need validation ✔ You need interception
🎯 Final Mental Picture
Proxy is like:
🛡️ Security guard 📋 Rule enforcer 👀 Watcher 🎭 Behavior modifier
Standing between the outside world and your data.
