DEV Community

Cover image for 7 Use Cases for Javascript Proxies 🧙

7 Use Cases for Javascript Proxies 🧙

Matt Lewandowski on June 22, 2024

JavaScript's Proxy object is a useful tool that opens up a world of possibilities, allowing you to create some really useful behaviors in your appl...
Collapse
 
matatbread profile image
Matt

Nice article.

Proxies also find a place in state management, specifically in some UI frameworks, which I guess is a specific case of number 7 above.

To avoid the issues you mention, AI-UI limits use of Proxies to specific cases of iterable objects that can't be implemented in any other way.

Collapse
 
joeattardi profile image
Joe Attardi

Proxies are cool! I recently used one with the XMLHttpRequest's open method (my project uses Axios). I needed global events for whenever a request started or completed, so I replaced XMLHttpRequest.prototype.open with a Proxy to the real implementation, and before calling the real implementation I add a couple of event listeners to the target (the XHR object).

I was going to blog about this but I dont think people are scrambling for content about XMLHttpRequest these days :)

Great article!

Collapse
 
appqui profile image
Igor Golodnitsky

Always curious why would anyone use Axios on browser? It looks like 50 kb of js, just to do the same as fetch.

Collapse
 
joeattardi profile image
Joe Attardi

It's a fair question.

One reason is compatibility - Axios uses XMLHttpRequest so it's good for situations where fetch isn't supported. That's rare now but a lot of legacy apps probably are using it. Once you have an established app using something like axios it's a lot of work to pull it out and replace with fetch.

It also provides some more advanced things that are trickier to do with fetch like request interceptors.

Collapse
 
laci556 profile image
László Bucsai

Great article! Proxies are definitely one of the most powerful features of JS. We use them to bridge the gap between the TS type system and concrete values, for example providing type-safe functions for creating string templates (translations, email templates etc). The function receives a callback whose argument is a Proxy of an empty object but acts like the type we're expecting to be passed to template. Then the accessed properties return template variables formatted for the given library. createTemplate((user) => `Hello ${user.name}`) returns "Hello {{ user.name }}", where the user object doesn't actually contain any data, but it makes creating these kinds of static values feel like writing dynamic JS while also providing type safety. (I don't even want to think about how many hours I've wasted debugging random undefineds because of small typos in handwritten templates 😄)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

FYI, this is similar to “magic methods” in PHP:

  • __call()
  • __callStatic()
  • __get()
  • __set()
  • __unset()
Collapse
 
drfcozapata profile image
Francisco Zapata

GENIAL!!!
Gracias por compartirlo.
Bendiciones desde Venezuela

Collapse
 
mrvaa5eiym profile image
mrVAa5eiym

what is the difference between

obj[prop] = value;

return Reflect.set(target, property, value, receiver);

why use one or the other in the cases above?

Collapse
 
herrynguyenvn profile image
Herry Nguyen 🇻🇳

Helpful article. thank bro.