Search for a command to run...
No comments yet. Be the first to comment.
In today’s web applications, keeping information updated across multiple tabs or windows can greatly enhance the user experience. For instance, if a user logs out in one tab, you want that action to be reflected in all other tabs. The Broadcast Chann...
Every October, the developer community buzzes with Hacktoberfest energy. PRs fly, t-shirts are earned, and GitHub turns green. But here's what nobody talks about: what happens in November? For most contributors, the answer is simple: nothing. The rep...
The debate over AI coding agents is missing the most important factor. It’s not about prompt engineering, it’s about understanding the context window. Developers are divided. One side claims coding agents suck. The other insists you’re just using the...
Learnings from a Research Paper
Lately, I have been working on a feature to capture images from media streams and scale them down to reduce their size. This helps save storage and reduce costs before uploading the images to a storage service. For this, I used Canvas to render the i...
AI helps you do more, but only if you know the basics well enough to tell it what you want.
Objects in JavaScript are useful data types that let us define complex data with simple key-value pairs, like a dictionary. Sometimes, you might want to change how JavaScript objects work by default. This is where Proxy Objects are helpful. In this article, we will discuss what proxy objects are, why they are useful, and how to use them.
Before understanding what a Proxy Object is, let's look at the word Proxy. A proxy means something that acts like the original thing but isn't the original thing. Similarly, a Proxy Object is an object created using the original object that can intercept and change how the original object works.
The Proxy constructor takes two parameters
target: the object you want to create a proxy for
handler: an object with operations you want to change or redefine
const proxyObject = new Proxy(target, handler)
When we create Proxy Objects with a handler that has operations you want to change, it intercepts those operations, catches the call to the target object, and runs the custom logic you defined for those operations.
The operations are called traps, which are basically the internal methods of an object. Some of them are:
get
set
deleteProperty
Here, I have created a simple visual showing how a Proxy Object works. If we try to access or set a value, it intercepts and runs the operations (traps) defined in the handler.
Alright, I hope the what and how of Proxy Objects are clear. Next, we will discuss some use cases to show why Proxy Objects are useful.
Let's say you want to create a system where every time a property is accessed from the object, it logs the information.
const platform = {
type: "peerlist.io",
handle: "sachin87",
};
const proxyPlatformObj = new Proxy(platform, {
get(target, key) {
console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
return target[key];
},
});
// try to access the property
proxyPlatformObj.type;
// [Info]: Accessing type at 1729661722827
// 'peerlist.io'
This is a very simple use case, but it's useful when logging is needed, and you can expand it to do more advanced things.
We can also let users access properties that aren't directly available. For example, in the case above, we might want the full URL of the platform with the user handle.
const proxyPlatformObj = new Proxy(platform, {
get(target, key) {
console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
if (key === "url") {
return `https://${target.type}/${target.handle}`;
}
return target[key];
},
});
// try to access the url property
proxyPlatformObj.url;
// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'
Another use case is checking the value before adding it. For instance, let's say we want to check the handle's value before setting it. We will validate two basic conditions:
It should be in lowercase
It can be alphanumeric
const proxyPlatformObj = new Proxy(platform, {
set(target, key, value) {
if (key === "handle" && !(/^[a-z0-9]+$/.test(value))) {
console.error(`[Error]: ${key} should be in small case and can be alphanumerical`);
} else {
return Reflect.set(target, key, value);
}
},
});
proxyPlatformObj.handle="Sachin87"
// [Error]: handle should be in small case and can be alphanumerical
You might be wondering what Reflect.set(target, key, value) is. It's a namespace object with static methods for calling JavaScript object's internal methods that can be intercepted. If you don't want validation for all properties, you can use the Reflect object to keep the default behavior.
We talked about two use cases logging and validation, but you can intercept other internal methods based on your needs.
We talked about what a Proxy Object is, how it works, and some of its uses. A Proxy Object is helpful, but we should be aware of its downsides. We should use it only when necessary to avoid adding complexity or bugs by mistake.
That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.