Real world use cases of object proxies

Standard definition

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

Let's simplify that a little.

"Customise the behaviour of an object, using handlers" -- in a broad sense.

Target and Handlers

Target is the object of concern on which Proxy is applied

Handlers or traps are functions passed as second parameter to Proxy which are responsible to handle actions (such as get, set etc) on the target

new Proxy(target, handler);

Let's look at some examples which will add weight around what the statement intends to convey.

Handle defaults

Consider a script which is to be used to match the winners with prizes they have won and everyone who participated gets a consolation prize.

A cleaner approach to coding it as opposed to a long list of if-else statements or switch is to use Proxy:

const prizeRegistry = {
  karen: "First Prize - BMW X5",
  mark: "Second Prize - Scooty",
  athira: "Third Prize - Bicycle"
};

const prizeHandler = {
  get(obj, prop) {
    return prop in obj ?
      obj[prop] :
      "Consolation prize - Chocolate Bar";
  }
};

const prizeList = new Proxy(prizeRegistry, prizeHandler);

console.log(prizeList.karen);
// expected output: "First Prize - BMW X5"

console.log(prizeList.reena);
// expected output: "Consolation prize - Chocolate Bar"

Input validations

With user inputs being a cog in the wheel to most of the applications today. Validations are to be placed to keep the data clean, ironically often as a result the code responsible gets messed up with time.

const validator = {
  set(obj, prop, value) {
    if (prop === 'weight') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The weight is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The weight seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // Indicate success
    return true;
  }
};

const fish = new Proxy({}, validator);

fish.weight = 100;
console.log(fish.weight); 
// expected output: 100
fish.weight = 'small';    // Throws an exception
fish.weight = 300;        // Throws an exception

Finding an array item object by its property

const products = new Proxy([
  { name: 'Firefox', type: 'browser' },
  { name: 'SeaMonkey', type: 'browser' },
  { name: 'Thunderbird', type: 'mailer' }
],
{
  get(obj, prop) {
    // The default behavior to return the value; prop is usually an integer
    if (prop in obj) {
      return obj[prop];
    }

    // Get the number of products; an alias of products.length
    if (prop === 'number') {
      return obj.length;
    }

    let result;
    const types = {};

    for (const product of obj) {
      if (product.name === prop) {
        result = product;
      }
      if (types[product.type]) {
        types[product.type].push(product);
      } else {
        types[product.type] = [product];
      }
    }

    // Get a product by name
    if (result) {
      return result;
    }

    // Get products by type
    if (prop in types) {
      return types[prop];
    }

    // Get product types
    if (prop === 'types') {
      return Object.keys(types);
    }

    return undefined;
  }
});

console.log(products[0]);          // { name: 'Firefox', type: 'browser' }
console.log(products['Firefox']);  // { name: 'Firefox', type: 'browser' }
console.log(products['Chrome']);   // undefined
console.log(products.browser);     // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
console.log(products.types);       // ['browser', 'mailer']
console.log(products.number);      // 3

The above snippet is from mozilla documentation, showing how an object in an array of objects can be optimally found using proxy

There are a number of other real-world usecase(s) that could leverage the awesomeness of Proxy to better maintain and help keep the code cleaner.

P.S These are the few i use day in and out, there are few more such as DOM manupulations, Property forwarding. You can check em out here.

Hope this helps. Cheers 🍻

Comments

[Dennis Persson]

Great post. I hoped to learn about fish when looking at the header image though 😄🎣

[Andrea Giammarchi]

more use cases in proxy-pants (and counting, as I've been using Proxy for way too many things recently)

[Devang Tomar]

That was a nice read! Liked, bookmarked and followed, keep the good work! 🙌

[Julia 👩🏻‍💻 GDE]

Thanks for sharing some use cases for proxy. This pattern always confuses me 😅

[Al - Naucode]

Thanks, it was a good read, bookmarked, and followed!

[Mai Lượng]

good, thankyou

[Soldeplata Saketos]

looks like the get function in
"Finding an array item object by its property"
will run every time we access to the proxy properties, looping through all the elements of the proxied object. That does not look "optimal" to me