JavaScript Proxy/Handler

JavaScript Proxy is an object which intercepts another object and resists the fundamental operations on it. This object is mostly used when we want to hide information about one object from unauthorized access. A Proxy consists of two parts which are its target and handler. A target is a JavaScript object on which the proxy is applied and the handler object contains the function to intercept any other operation on it.

Syntax:

const prox = new Proxy(tar, handle) 

Parameters: This object accepts two parameters.

• tar: It is the object on which the Proxy is to be applied
• handle: It is the object in which the intercept condition is defined

Returns: A proxy object.

Example 1: Here the method applies a Proxy object with an empty handler.

let details = {
    name: "Raj",
    Course: "DSA",
}
const prox = new Proxy(details, {})

console.log(prox.name);
console.log(prox.Course);

Output:

Raj
DSA

Example 2: Here the method applies a handler function to intercept calls on the target object.

let details = {
    name: "Raj",
    Course: "DSA",
}
const prox = new Proxy(details, {
    get: function(){
        return "unauthorized"
    }
})

console.log(prox.name);
console.log(prox.Course);

Output:

unauthorized
unauthorized

Example 3: Here the method traps calls on the target object based on the condition.

let details = {
    name: "Raj",
    Course: "DSA",
}
const proxy = new Proxy(details, {
    get: function(tar, prop){
        if(prop == "Course"){
            return undefined;
        }
        return tar[prop];
    }
});

console.log(proxy.name);
console.log(proxy.Course);

Output:

Raj
undefined

Example 4: This example uses Proxy methods to delete properties.

const courseDetail = {
    name: "DSA",
    time: "6 months",
    status: "Ongoing",
}

const handler = {
  deleteProperty(target, prop) {
    if (prop in target) {
      delete target[prop];
      console.log(`Removed: ${prop}`);
    }
  }
};

const pro = new Proxy(courseDetail, handler);

console.log(pro.name);
delete pro.name
console.log(pro.name);

Output:

DSA
Removed: name
undefined

Supported Browsers:

• Chrome
• Edge
• Firefox
• Opera
• Safari

We have a complete list of JavaScript Proxy methods, to check please go through JavaScript Proxy/handler Reference article.