Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
proxy
object

What is a JavaScript proxy?

Educative Answers Team

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.

RELATED TAGS

javascript
proxy
object
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring