What is the use of Proxy and Reflect in JavaScript?

man these are really very helpful 🤘 thanks

I posted this elsewhere, but here's an example use-case:

Let's say you want to use arrays as accessors, like this:

const array = "the five boxing wizards jump quickly".split(" ");
const words = fancy(array);

words[[3, -1, -2]];
// ["wizards", "quickly", "jump"]

words[-1] = "swiftly";
// ["the", "five", "boxing", "wizards", "jump", "swiftly"]

words[[0, -1]] = ["alpha", "omega"];
// ["alpha", "five", "boxing", "wizards", "jump", "omega"]

You can use Proxy and Reflect to achieve it:

const parseIndexesString = (indexes, maxIndex) =>
  indexes
    .split(",")
    .map((x) => x.trim())
    .map((x) => (/^-\d+$/.test(x) ? maxIndex + +x : x));

const fancyArrayAccessors = {
  get(obj, prop) {
    if (/^\d+$/.test(prop)) {
      return Reflect.get(...arguments);
    }
    const props = parseIndexesString(prop, obj.length);
    return props.map((prop) => obj[prop]);
  },
  set(obj, prop, value) {
    if (/^\d+$/.test(prop)) {
      return Reflect.get(...arguments);
    }
    const props = parseIndexesString(prop, obj.length);
    return props.map((prop, idx) => 
      (obj[prop] = Array.isArray(value) ? value[idx] : value)
    );
  }
};

const fancy = (arr) => new Proxy(arr, fancyArrayAccessors);

Here, Reflect is being used to take care of the "default" case of accessing an array using a normal numerical index.

The rest of the time we're abusing the fact that any key in arr[key] form gets coerced into a string, so can be parsed into whatever we like once it reaches the getter/setter in a Proxy handler.

First time I came across Reflect was in the web components native shim:

  const wrapperForTheName = {
    'HTMLElement': function HTMLElement(this: HTMLElement) {
      return Reflect.construct(BuiltInHTMLElement, [], this.constructor);
    },
  };
  window.HTMLElement = (wrapperForTheName[
    'HTMLElement'
  ] as unknown) as typeof HTMLElement;
  HTMLElement.prototype = BuiltInHTMLElement.prototype;
  HTMLElement.prototype.constructor = HTMLElement;
  Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);

MDN: Reflect.construct().

Browsers implement custom elements as native classes (separate from JS classes).

Some tooling insists on compiling down to ES5 and using Reflect.construct() instead of new makes it possible to use custom elements from ES5 code (obviously the browser has to support custom elements which implies that it also supports classes (ES2015)).

Andrea Giammarchi 🍥

@webreflection

now that IE/Edge (legacy) are gone, I am using Proxy all over and one of the most compelling cases is the one-off cache through a Map:

const speedy = new Proxy(new Map, {
get(map, key) {
if (!map.has(key))
map.set(key, compute(key));
return map.get(key);
}
});

14:03 PM - 21 May 2022

I’m not too familiar with Reflect, but have a pretty good analogy for proxies that I’m sure will be helpful
If you know about Express and how the whole middleware pattern works, then proxies are exactly like middleware but for plain JavaScript objects. So, whenever you read from and object or make any changes to an object you can execute custom behaviour on those operations.
And as for the use cases, the only real ones I can think of is when you’re building some framework.

I wrote a tiny package that uses proxy to create factories for any of your existing es6 (or old es5) classes and allows to define private fields or function based on a rule function: github.com/jankapunkt/js-class-pri...

No need to fully rewrite the classes to support private members (plus I still dislike the choice of the hash character for the private fields feature)

Once I used Reflect on a jest test to simulate the class/ method spyOn

You may find this helpfull - use-es6-proxies-to-enhance-your-ob...

well, hard to imagine a use case for that unless you're building your own framework or a library. If someone asks me such stuff in an interview, I would go 'cmon are you doing some rocket science'?)