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.

JavaScript Proxy/Handler – FAQs

What is a Proxy in JavaScript?

A Proxy is a built-in object that allows you to create a custom behavior for fundamental operations on another object (called the target object). Proxies enable you to intercept and define custom behavior for operations such as property lookup, assignment, enumeration, function invocation, etc.

What is a Handler in JavaScript?

A Handler is an object that contains traps. Traps are methods that provide property access. These traps are methods that define the behavior of the proxy when an operation is performed on it.

How do you create a Proxy?

You can create a Proxy by using the new Proxy() constructor, which takes two arguments: the target object and the handler object.

How does the get trap work?

The get trap intercepts property access on the target object. It takes three arguments: the target object, the property name, and the receiver (typically the proxy itself).

How does the set trap work?

The set trap intercepts property assignment on the target object. It takes four arguments: the target object, the property name, the value to be assigned, and the receiver (typically the proxy itself).

S

shobhit_sharma

Follow

Improve