Think of it as a security guard for your objects! Proxy lets you intercept and customize operations (get, set, delete) performed on objects. Want to hide sensitive data? Validate inputs? Proxy is your friend!
A Proxy is like having a bouncer at a club - they decide who gets in, what they can do, and how they can interact with what's inside.
In JavaScript, a Proxy object allows you to intercept and customize fundamental operations for target objects, such as property lookup, assignment, enumeration, or function invocation. It acts as a placeholder or a stand-in for another object, giving you the power to define custom behavior for these operations.
A Proxy is created with two main components:
1.target: The object that the Proxy virtualizes. It is often the object you want to apply custom behavior to.
2.handler: An object containing traps. Traps are methods that provide the custom behavior for an operation. For example, the get trap intercepts property read operations.
The Cheat Code: new Proxy(originalObject, handler) - The handler decides what happens when someone tries to access your object.
// Your original object (the VIP area)
const account = {
accountNumber: "1234567890123456",
accountHolderName: "Raju"
};
// The bouncer (proxy handler)
const handler = {
get(target, prop) {
// Custom logic goes here
}
};
// Create the secured entrance (proxy)
const securedAccount = new Proxy(account, handler);
Average 5.0 by 2 learners
const account = {
accountNumber: "1234567890123456",
accountHolderName: "Raju",
balance: 50000
};
const handler = {
get(target, prop) {
// If someone asks for account number, encrypt it!
if (prop === 'accountNumber') {
const accountNum = target[prop];
// Show only last 4 digits, hide the rest
return accountNum.replace(/\d(?=\d{4})/g, '*');
}
// For everything else, return normal value
return target[prop];
}
};
🛡️ Step 3: Create the Secured Proxy
const securedAccount = new Proxy(account, handler);
// Test the magic!
console.log(securedAccount.accountNumber); // "************3456" âś…
console.log(securedAccount.accountHolderName); // "Raju" âś…
console.log(securedAccount.balance); // 50000 âś…
Result: Account number is automatically encrypted, but other properties work normally!
const account = {
accountNumber: "1234567890123456",
accountHolderName: "Raju",
balance: 50000
};
const securityHandler = {
get(target, prop) {
console.log(`🔍 Someone accessed: ${prop}`); // Logging!
if (prop === 'accountNumber') {
// Encrypt account number - show only last 4 digits
return target[prop].replace(/\d(?=\d{4})/g, '*');
}
if (prop === 'balance' && target[prop] > 10000) {
return "đź’° High balance - Contact bank for details";
}
return target[prop];
}
};
const securedAccount = new Proxy(account, securityHandler);
console.log(securedAccount.accountNumber); // "************3456"
console.log(securedAccount.accountHolderName); // "Raju"
console.log(securedAccount.balance); // "đź’° High balance - Contact bank for details"
Proxy objects offer a powerful and flexible way to:
•Intercept Operations: Gain fine-grained control over how objects are interacted with.
•Validate Data: Implement validation logic before properties are set.
•Data Masking/Security: Protect sensitive data by modifying how it's accessed or displayed.
•Logging and Debugging: Log property access or modifications for debugging purposes.
•Reactivity: Build reactive systems where changes to properties trigger other actions (e.g., in UI frameworks).
By understanding and utilizing JavaScript Proxy objects, you can build more robust, secure, and controlled applications, especially when dealing with complex data structures and sensitive information.
Remember: "Proxy = Personal Bodyguard for Objects" 🎯
Rule: Handler methods match the operation (get/set/delete/has)
Power: Can make objects behave however you want