What is a JavaScript proxy?

A proxy is a JavaScript object that customizes operations (i.e. getting a key, setting a key, etc.).

Syntax

The following illustration goes over the syntax and defines some important terms:

svg viewer

Examples

1. Proxied lookup

When a non-existent key in an object is accessed, it normally returns undefined. However, suppose that we want to return a -1 instead.

Here is where the proxy object comes in:

// Creating an object
let country = {name: 'Singapore', area: 721.5};
// Creating a handler
let handler = {
// get is a trap. Recall that the target is the object to be proxied.
get: function(target, prop){
// if the prop that the user is looking for exists in that object, return the value
if(Object.keys(target).includes(prop)){
return target[prop];
} else{
// return a -1 if the prop does not exist in the object.
return -1;
}
}
}
// Creating a proxy
let proxy = new Proxy(country, handler);
// Now access the props using the proxy
console.log(proxy.name);
console.log(proxy.area);
console.log("Looking up an invalid key with a proxy:",proxy.population);
console.log("Looking up an invalid key without the proxy:", country.population);

2. Proxied assignment

Suppose that we need to enforce a condition so​ that the value associated with name cannot be an empty string.

This can be done using a proxy:

// Creating an object
let country = {name: 'Singapore', area: 721.5};
// Creating a handler
let handler = {
// get is a trap. Recall that the target is the object to be proxied
// and value is the value to be assigned.
set: function(target, prop, value){
// if the user is trying to assign a name to an empty string, then
//display an error message.
if(prop === 'name' && value === ""){
console.log("name cannot be empty.")
return -1;
// else, the assignment can occur successfully.
}else if (prop === 'name'){
target[prop] = value;
console.log("The value has been successfully assigned.")
return 0;
}
}
}
// Creating a proxy
let proxy = new Proxy(country, handler);
// Now assign using the proxy
proxy.name = "";
proxy.name = "Thailand";

3. Proxied function

A proxy can be applied on a function as well.

// Creating a function
function greeting (greeter){
return 'Hello from ' + greeter;
}
// Recall that the target is the object (function is also
// an object) to the proxied. thisArgs is the this argument for the
//call and args are the arguments passed to the function.
let handler = {
apply: function(target, thisArg, args){
return target(args[0]) + '!';
}
}
// Creating the proxy
let proxy = new Proxy(greeting, handler);
// Using the proxy
console.log(proxy('Eduactive'));

For more information, refer to the official documentation.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved