What is Proxy in JavaScript?

What is Proxy in JavaScript?

ยท

2 min read

An proxy object wraps another item and captures tasks like perusing/composing properties and some essential activities.

const proxy = new Proxy(target, handler);

Proxy is created with two parameters.

  • Target: Original object which you want to proxy.
  • Handler: Object that defines which operations to intercept and redefine the intercepted operation.

EXAMPLE

const target = {
    name: "Rahul",
    place: "MH"
}; 
const handler = {}; 
const proxy = new Proxy(target, handler); 
console.log(proxy.place); 
// Rahul
console.log(proxy.place); 
// MH

If the handler object is empty, then the proxy behaves just like the original target object. To customize Proxy we should define functions in handler.


Get Handler Method

get() method intercept when there is an attempt to read the properties of target object.

const person = {
    name: "Rahul", 
    place: "MH"
}; 
const handler = {
    get: function(target, prop) {
        return prop in target ? target[prop]
            : "Invalid Prop"
    }
}; 

const newPerson = new Proxy(person, handler); 
console.log(newPerson.name); 
// Rahul
console.log(newPerson.age); 
// Invalid Prop

Set Handler Method

set() method intercept when there is an attempt to write a property to target object.

const person = {
    name: "Rahul", 
}
const handler = {
    set: function(target, prop, value) {
        if (prop === 'age') {
            if (value < 100) {
                target[prop] = value; 
            } else {
                throw new RangeError("Invalid age")
            }
        }
    }
}; 
const newPerson = new Proxy(person, handler); 
newPerson.age = 25; 
console.log = 25; 
console.log(newPerson.age); // 25
newPerson.age = 110; // Throws an Exception

Thanks For Reading ๐Ÿฐ


Removal.AI - [SPONSOR]

Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.

  • โœ… Drag & Drop Multiple Images
  • โœ… Optimize Product Images
  • โœ… Select Your Background
  • โœ… Set Your Output Size
  • โœ… Exceptional Results

Visit -> Removal AI

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!