Intercept and control interactions to target objects.
We can access object directly in javascript.
```js
person.name ;
person.age += 1;
```
With the Proxy pattern, we don't want to interact with this object directly. Instead, a Proxy object intercepts the request, and (optionally) forwards this to the target object - the `person` object in this case.
<video src="https://res.cloudinary.com/dq8xfyhu4/video/upload/q_auto/v1661499156/FM%20Workshop/design-patterns/proxy-pattern/proxy3_ztjb5i.mov" controls="controls" style="width: 100%;"></video>
In JavaScript, we can easily create a new proxy by using the built-in `Proxy` object.
The `Proxy` object receives two arguments:
1. The target object
2. A handler object, which we can use to add functionality to the proxy. This object comes with some built-in functions that we can use, such as `get` and `set`.
The `get` method on the handler object gets invoked when we want to access a property, and the `set` method gets invoked when we want to modify a property.
```ts
const person = {
name: "John Doe",
age: 42,
email: "
[email protected]",
country: "Canada",
};
const personProxy = new Proxy(person, {
get: (target, prop) => {
console.log(`The value of ${prop} is ${target[prop]}`);
return target[prop];
},
set: (target, prop, value) => {
console.log(`Changed ${prop} from ${target[prop]} to ${value}`);
target[prop] = value;
return true; // note that we need to return true here 🚨
},
});
```
The built-in `Reflect` object makes it easier to manipulate the target object. Only one line and don't need to return `true` magically.
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.
<video src="https://res.cloudinary.com/dq8xfyhu4/video/upload/q_auto/v1654010605/FM%20Workshop/design-patterns/proxy-pattern/Screen_Recording_2022-05-31_at_10.22.18_AM_incofj.mov" controls="controls" style="width: 100%;"></video>