Learn to Code via Tutorials on Repl.it!

← Back to all posts
Own your JavaScript objects with Proxy and Reflect.
CursorsDev (733)

Sometimes when you are playing with JavaScript, you find that JavaScript objects are actually extremely limited compared to what you can do in statically typed languages.

JavaScript is a very small language compared to C++ and others, but not to fear, here's how to extend your objects and own them.

Reflection with Reflect

Ok, if you're coming from other languages, you may have heard of Reflection. In short, Reflection is code that modifies other code and changes its behaviour. Well some of you may say, "hey, JavaScript is already pretty wild and rowdy compared to typed languages...", but if JavaScript is so wild, then its Reflection must be godly.

And it is. What if I told you, that you can control how your objects behave. Every single thing. What properties show up when you log them to the console, how to make properties readonly, how to cheat the JavaScript engine?

This is possible with things like Reflect and Proxy. Let's start with Reflect.

Reflect is a global object with methods to aid in Reflection. It has many methods to manipulate your object's internals, and the one I've found that I use most is probably Reflect.deleteProperty/Reflect.defineProperty. Reflect.defineProperty is essentially the same as Object.defineProperty except it returns true or false if the new definition was created. Reflect.deleteProperty however, deletes properties and returns true or false, like the delete operator.

Proxing object actions with Proxy

Yay! Time for the fun part. Proxy is a powerful global class that 'proxies' actions done against a target object. Note that it does not modify the original object and instead gives you a ProxyObject to use.

I have used Proxy a lot and it's extremely fun, but one word of caution: Proxy is slow as hecc im not even kidding look i even ditched grammar thats how slow it is pls do not use in production code

It's very easy to create a Proxy, it's simply:

const object = { hello: "world" };

const proxied = new Proxy(object, {
	... // the magic goes here
});

It takes a target and a proxy handler. Here's an example to intercept property access:

const object = { hello: "world" };

const proxied = new Proxy(object, {
	get (target, prop, receiver) {
		if (prop in target) return true;

		return false;
	}
});

console.log(proxied.hello); // true;
console.log(proxied.doesntExist); // false;

Look at that! We have just created an object that tells us if a property exists on it! This would not be possible without the power of Proxy, and there are way more handlers to choose from. Just an example of how amazing this is, check out this example. This is just a touch of what I do in JavaScript daily (since I use TypeScript :P) so why not join the fun!

:v thank you for reading my short share of fact and make sure to like and subscribe updoot and repost kthxbye

Comments
hotnewtop
CursorsDev (733)

:v note that the library is not done so please do not install @cursorsdottsx/x and screw up your code in doing so. this library is cursed as said in readme, now enjoy messing your coworker's code up with Proxy and Reflect :)