15 Oct 2020

Quick Intro: Proxy object in JavaScript

A couple of weeks ago, I ran a quick poll on LinkedIn to see how many engineers were using/had used the built-in Proxy object in JavaScript.

44% of respondents had never heard of it, a further 34% had heard of but never used; leaving only 22% who have ever used it.

What is this `Proxy` thing?

To save me trying to "reinvent the wheel", it's easier for me to abstract a piece from MDN.

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

Essentially meaning you can wrap an object and extend an object's functionality easily.

Okay, what could I do with it?

There's loads of stuff that you can do very quickly. Here's a super quick example that I think demonstrates the functionality well.

Let's say we have an object that holds our feature flag values:

export const featureFlags = {
  ENABLE_FEATURE_A: false,
  ENABLE_FEATURE_B: true,
  ENABLE_FEATURE_C: true,
};

and we can use these values across our codebase:

import { featureFlags } from ".";

const TestComponent = () => (
  <div>
    {featureFlags.ENABLE_FEATURE_A && <>Feature A is Enabled</>}

    {featureFlags.ENABLE_FEATURE_B && <>Feature B is Enabled</>}
  </div>
);

Awesome! We have a simple implementation that shows some stuff based on feature flag values. With this correct component setup, you expect to see something like this:

<div>Feature B is Enabled</div>

So, you're probably thinking "how does this relate to Proxy?

Let's say we want to deprecate Feature A, sure we could get rid of the flag all together or leave it to be false. However, in this highly exaggerated example, the developers of the codebase have forgotten about Find and Replace and can't be bothered to go searching if there's anything else still using this old flag.

A Proxy can come to the rescue! We can build a simplistic proxy to send a message somewhere to say that a deprecated feature flag is in use elsewhere.

const flagValues = {
  ENABLE_FEATURE_B: true,
  ENABLE_FEATURE_C: true,
};

export const featureFlags = new Proxy(flagValues, {
  get: (target, prop) => {
    if (!Object.keys(flagValues).includes(prop)) {
      // Send a message here to somewhere to inform engineers
      // that deprecated feature flag is still being used!
    }
    return target[prop] || false;
  },
});

Meaning that now any call to featureFlags.ENABLE_FEATURE_A will not only return false instead of undefined, but it will result in a message, to alert people of an old feature flag that is still in use.

Yep, I know! This example is a little exaggerated and is achievable in different ways, but it highlights the power of the Proxy object. There is indeed a lot more on offer rather than just what I have shown here, so it's definitely worth an exploration!

Can I use it now?

Of course, yes!

Well, kind of yes! If we're talking about Node.js go for it! It's had full support in Node since version 6!

In regards to the browser, there's pretty decent support except for Internet Explorer, unfortunately!

If you do want to use Proxy in production within a browser, I'd certainly recommend checking out the current browser support.

Wait, but I don't need it!

That's cool! I didn't write this article to say "You should use this!".

Day-to-day, you're unlikely to require Proxy, however now that you know about it, you have an extra tool in your toolbox, just in case!

I want to learn more!

So, as you've read, this article is a super quick stop introduction. However, there's fantastic documentation and tutorials on advanced usages. I'd recommend starting at the MDN documentation though.

TL;DR

There's a built-in object in JavaScript that's pretty cool called the Proxy Object.