What is Proxy Object in Javascript

Proxy Object in Javascript acts as an intermediate object through which we can access and modify the attributes of an original target object. Using proxies we can override and attributes and methods of the target object.

Creating a Proxy Object

A proxy object can be created using Proxy object and it takes two arguments. The first is the target which and be an object or function that returns an object. And the second is the object which contains handlers these handlers contain traps that are triggered by a proxy object when a certain event occurs. Some of the trap methods are get, set, apply etc are discussed below in the Proxy Traps Section

Below is an example of creating a proxy object and retrieving attributes.

let car = {
    manufacturer:"Tata",
    model:"Safari",
    price:120000,
}

const handler = {
    get(target, property){
        return target[property];
    }
};

let carProxy = new Proxy( car, handler )

The object carProxy has access to all the attributes of car an object and when an attribute is called it implicitly calls the get trap function with the argument target and property.

The target is the car object and property the argument is the attribute called.

Example

console.log(carProxy.manufacturer);
console.log(carProxy.model);

In carProxy.manufacturer the manufacturer is the property that we want to display.

Example of Using Proxy Object

A more well-formed example of using a proxy object with get and set traps.

let student = {
    name:"Vivek",
    passout_percentage:80
}

const handler = {
    get(target, property){
        return target[property];
    },
    set( target, property, value ){
        target[property] = value
    }
};

let studentProxy = new Proxy( student, handler );

console.log("Name before updating is:"+studentProxy.name);
studentProxy.name = "Veeren";
console.log("Name before updating is:"+studentProxy.name);
console.log(student);

Here studentProxy.name = "Veeren"; call the set trap that will set the value Veeren to name property of student object.

We can perform a few additional logic inside set trap method.

Output

Name before updating is:Vivek

Name before updating is:Veeren

[object Object] {
    name: "Veeren",
    passout_percentage: 80
}

How to Call a Function using Proxy Object

You can also call a proxy object as a function that will return some object. For this, you have to pass the target wrapped inside a function.
Look at the below example

const studentFunction = () => {
    return {
        name:"Vivek",
        passout_percentage:80
    }
};

let isPassed = new Proxy( studentFunction, {
    apply( target, thisArg, argumentsList ){
        return target().passout_percentage >= 35;
    }
} );

console.log("Is Student passed the exam: "+isPassed());

Here studentFunction is a function that returns an object. To call a function the handler must have a apply trap defined.

The apply trap is called when isPassed() is called like a function.

Output

Is Student passed the exam: true

What are Proxy Traps

The traps in Proxy objects are the function that gets called implicitly by the proxy objects themselves. The functions that get called truly depended on what kind of operations are been performed over the proxy object.

Example:
When you call studentProxy.name it triggers get(target, property) handler method, similarly when you studentProxy.name="Veeren"; then set(target, property, value) handler method will be called.

The get() Trap

The get() trap method is triggered and through the get() trap we can return the results as it is or can modify the output.

let student = {
    name:"Vivek",
    passout_percentage:80
}

let studentProxy = new Proxy( student, {
    get(target, property){
        return target[property];
    }
} );

console.log(studentProxy.name); // accessing values

The set() Trap

The set() trap is triggered during the assignment of new values to the proxy object. It takes three parameters target, property and value.

let student = {
    name:"Vivek",
    passout_percentage:80
}

let studentProxy = new Proxy( student, {
    get(target, property){
        return target[property];
    }
} );

console.log(studentProxy.name); // accessing values

The apply() Trap

The apply() trap is triggered when a proxy object is called a function. You can also pass parameters through the function which returns an object.

const studentFunction = () => {
    return {
        name:"Vivek",
        passout_percentage:80
    }
};

let isPassed = new Proxy( studentFunction, {
    apply( target, thisArg, argumentsList ){
        return target().passout_percentage >= 35;
    }
} );

console.log("Is Student passed the exam: "+isPassed());

The construct() Trap

The construct trap function does the same process as a class constructor. It is triggered when a new object is created from a proxy object.

The construct takes target and argumentsList as parameters.

function studentFunction(){
    return {
        name:"Vivek",
        passout_percentage:80
    }
}

let Student = new Proxy( studentFunction, {
    construct( target, argumentsList ){
        console.log('paramters ',target, argumentsList);
        return target();
    }
} );

let new_student = new Student({age:18});

Output

paramters 
function studentFunction(){
    return {
        name:"Vivek",
        passout_percentage:80
    }
}
[[object Object] {
    age: 18
}]