snippetjavascriptTip
Chaining dynamic getters using the Proxy object
Viewed 0 times
objectjavascriptproxychainingtheusingdynamicgetters
Problem
The dawn of ES6 brought about jQuery's fall from grace, as a lot of the conveniences it afforded developers were now available in the language itself. However, jQuery's API design was convenient in many ways that native JavaScript often isn't. One of the most practical things jQuery offered was its ability to chain methods together, minimizing duplication and making code more readable.
Looking at the use case at hand, I thought that I could stitch together a general-purpose solution using JavaScript's
@Quick refresher
To recap, intercepting the behavior of the
In our scenario, we want each property to be accessed as a function. The function should do one of two things, depending on the argument it receives:
Looking at the use case at hand, I thought that I could stitch together a general-purpose solution using JavaScript's
Proxy object. In fact, I think that the concept of dynamic getters and setters that I described in my previous post is a great place to start.@Quick refresher
To recap, intercepting the behavior of the
get and set traps of a Proxy object allows us to create dynamic accessors for objects. This is particularly useful when the shape of the data is not known in advance, or when the value of a property needs to be manipulated before it is returned.In our scenario, we want each property to be accessed as a function. The function should do one of two things, depending on the argument it receives:
Solution
const getHandler = {
get: (target, prop) => {
return value => {
if (typeof value !== 'undefined') {
target[prop] = value;
return new Proxy(target, getHandler);
}
return target[prop];
};
}
};
const styles = {};
const proxiedStyles = new Proxy(styles, getHandler);
proxiedStyles.color('#101010').background('#fefefe').margin('4px 8px');
proxiedStyles.color(); // #101010
proxiedStyles.background(); // #fefefe
proxiedStyles.margin(); // 4px 8px@Quick refresher
To recap, intercepting the behavior of the
get and set traps of a Proxy object allows us to create dynamic accessors for objects. This is particularly useful when the shape of the data is not known in advance, or when the value of a property needs to be manipulated before it is returned.In our scenario, we want each property to be accessed as a function. The function should do one of two things, depending on the argument it receives:
- If the argument is
undefined, then the property should be returned as-is. - If the argument is any other value, the property should be set to the value of the argument and a proxy of the object should be returned.
Given these requirements, we can define the handler's behavior for the
get trap. All we need to do is check if the argument is undefined and choose which behavior to perform. Here's what the code looks like:Code Snippets
const getHandler = {
get: (target, prop) => {
return value => {
if (typeof value !== 'undefined') {
target[prop] = value;
return new Proxy(target, getHandler);
}
return target[prop];
};
}
};
const styles = {};
const proxiedStyles = new Proxy(styles, getHandler);
proxiedStyles.color('#101010').background('#fefefe').margin('4px 8px');
proxiedStyles.color(); // #101010
proxiedStyles.background(); // #fefefe
proxiedStyles.margin(); // 4px 8pxContext
From 30-seconds-of-code: dynamic-getter-chain-proxy
Revisions (0)
No revisions yet.