JavaScript Proxy Pattern (Proxy & Reflect)
In short, âProxy pattern means a pattern by which you will interact with the Proxy object instead of interacting with target object directlyâ
đ„ I have published an In Depth âReact Native Advanced Guide Bookâ which secured â1000 GitHub STAR. (Free Book Link)
By Proxy pattern
- We can intercept and control interactions to target objects
- We can get more control over the interactions with certain objects.
With a Proxy object, we get more control over the interactions with certain objects. A proxy object can determine the behaviour whenever weâre interacting with the object, for example when weâre getting a value, or setting a value.
Generally speaking, a proxy means a stand-in for someone else. Instead of speaking to that person directly, youâll speak to the proxy person who will represent the person you were trying to reach. The same happens in JavaScript: instead of interacting with the target object directly, weâll interact with the Proxy object.
Letâs create a person
object, that represents Anis.
const person = {
name: "Anis",
age: 27,
nationality: "American",
};
Instead of interacting with this object directly, we want to interact with a proxy object. In JavaScript, we can easily create a new proxy by creating a new instance of Proxy
.
const person = {
name: "Anis",
age: 27,
nationality: "American",
};
const personProxy = new Proxy(person, {});
The second argument of Proxy
is an object that represents the handler. In the handler object, we can define specific behavior based on the type of interaction. Although there are many methods that you can add to the Proxy handler, the two most common ones are get
and set
:
get
: Gets invoked when trying to access a propertyset
: Gets invoked when trying to modify a property
Instead of interacting with the
person
object directly, we'll be interacting with thepersonProxy
.
Letâs add handlers to the personProxy
Proxy. When trying to modify a property, thus invoking the set
method on the Proxy
, we want the proxy to log the previous value and the new value of the property. When trying to access a property, thus invoking the get
method on the Proxy
, we want the proxy to log a more readable sentence that contains the key and value of the property.
const personProxy = new Proxy(person, {
get: (obj, prop) => {
console.log(`The value of ${prop} is ${obj[prop]}`);
},
set: (obj, prop, value) => {
console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
obj[prop] = value;
},
});
When accessing the name
property, the Proxy returned a better sounding sentence: The value of name is Anis
.
When modifying the age
property, the Proxy returned the previous and new value of this property: Changed age from 27 to 28
.
Use case of Proxy pattern (Validation)
A proxy can be useful to add validation. A user shouldnât be able to change person
's age to a string value, or give them an empty name. Or if the user is trying to access a property on the object that doesn't exist, we should let the user know.
const personProxy = new Proxy(person, {
get: (obj, prop) => {
if (!obj[prop]) {
console.log(
`Hmm.. this property doesn't seem to exist on the target object`
);
} else {
console.log(`The value of ${prop} is ${obj[prop]}`);
}
},
set: (obj, prop, value) => {
if (prop === "age" && typeof value !== "number") {
console.log(`Sorry, you can only pass numeric values for age.`);
} else if (prop === "name" && value.length < 2) {
console.log(`You need to provide a valid name.`);
} else {
console.log(`Changed ${prop} from ${obj[prop]} to ${value}.`);
obj[prop] = value;
}
}
});
The proxy made sure that we werenât modifying the
person
object with faulty values, which helps us keep our data pure!
What is Reflect?
JavaScript provides a built-in object called Reflect
, which makes it easier for us to manipulate the target object when working with proxies.
Previously, we tried to modify and access properties on the target object within the proxy through directly getting or setting the values with bracket notation. Instead, we can use the Reflect
object. The methods on the Reflect
object have the same name as the methods on the handler
object.
Instead of accessing properties through obj[prop]
or setting properties through obj[prop] = value
, we can access or modify properties on the target object through Reflect.get()
and Reflect.set()
. The methods receive the same arguments as the methods on the handler object.
const personProxy = new Proxy(person, {
get: (obj, prop) => {
console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`);
},
set: (obj, prop, value) => {
console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
Reflect.set(obj, prop, value);
},
});
Perfect! We can access and modify the properties on the target object easily with the Reflect
object.
Proxy may be an Over-skill đŁ
Proxies are a powerful way to add control over the behaviour of an object. A proxy can have various use-cases: it can help with validation, formatting, notifications, or debugging.
Overusing the Proxy
object or performing heavy operations on each handler
method invocation can easily affect the performance of your application negatively. It's best to not use proxies for performance-critical code.
Thank you for reading this article. I enjoy sharing my 5 years of experience in JavaScript, React, React-native & Node.js with you every day.
If you enjoyed reading this article, I would appreciate it if you could follow me on Twitter & Medium. You can also leave your feedback and comments there. Thank you for your support and interest.