This content originally appeared on Bits and Pieces - Medium and was authored by Mohammad Basit
JavaScript is a versatile and flexible language that offers a wide range of features for developers. One of the more advanced features in JavaScript is the proxy object, which allows developers to intercept and customize fundamental language operations. With proxies, you can implement advanced features such as memoization, lazy-loading, data validation, and more.
What are proxies?
A proxy is an object that acts as an intermediary between the client and the target object. When you create a proxy object, you can intercept and customize certain operations that are performed on the target object. You can think of a proxy as a wrapper object that allows you to modify the behaviour of the target object.
Example
const target = {
name: "Basit",
age: 26
};
const handler = {
get: function(target, property, receiver) {
console.log(`Getting ${property}`);
return target[property];
},
set: function(target, property, value, receiver) {
console.log(`Setting ${property} to ${value}`);
target[property] = value;
}
};
const proxy = new Proxy(target, handler);In this example, we created a target object with two properties, name and age. We also created a handler object that has two methods, get and set. The get method intercepts property accesses on the target object, while the set method intercepts property assignments on the target object.
Finally, we created a proxy object using the target object and the handler object. Now, when we access properties on the proxy object, the get method in the handler object will be called.
Let’s see how this works:
console.log(proxy.name); // Getting name
// Output: Basit
proxy.age = 40; // Setting age to 40
console.log(proxy.age); // Getting age
// Output: 40
Real world examples of proxies:
1. Validation
const user = {
name: "",
phone: ""
};
const validator = {
set: function(target, prop, value) {
if (prop === "phone") {
const phoneRegex = /^\d{10}$/;
if (!phoneRegex.test(value)) {
throw new Error("Invalid phone number");
}
}
target[prop] = value;
return true;
}
};
const userProxy = new Proxy(user, validator);
userProxy.name = "John Doe";
userProxy.phone = "1234567890"; // This will work
userProxy.phone = "1234"; // This will throw an errorIn this example, we created a user object with name and phone properties. We also created a validator object with a set method that checks if the phone property is in the correct format before it is assigned to the user object.
2. Memoization
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
}
return n * factorial(n - 1);
}
const cache = {};
const memoizedFactorial = new Proxy(factorial, {
apply: function(target, thisArg, args) {
const n = args[0];
if (n in cache) {
console.log(`Returning cached result for ${n}`);
return cache[n];
}
const result = target.apply(thisArg, args);
cache[n] = result;
console.log(`Caching result for ${n}`);
return result;
}
});
console.log(memoizedFactorial(5)); // Output: Caching result for 5, 120
console.log(memoizedFactorial(5)); // Output: Returning cached result for 5, 120In this example, we created a factorial function that calculates the factorial of a number. We also created a cache object to store the results of previous computations. Finally, we created a memoizedFactorial object using a proxy that intercepts calls to the factorial function and caches the results.
💡 Tip: You could use an open-source toolchain like Bit to share proxies as reusable components. Bit is a platform for sharing and collaborating on reusable code components. By isolating and sharing specific functionalities, you can create custom proxy objects for your projects and use them across multiple applications. This can lead to faster development times and more maintainable codebases, as you can easily share and reuse common functionalities across projects. Learn more here.
Learn more about sharing and reusing components:
Extracting and Reusing Pre-existing Components using bit add
Conclusion
Proxies are a powerful feature in JavaScript that allows you to intercept and customize fundamental language operations. With proxies, you can implement advanced features such as memoization, lazy-loading, data validation, and more. By using proxies, you can write more efficient and flexible code that meets the specific needs of your application.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Proxies in JavaScript: A Powerful Tool for Customization was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Mohammad Basit
Mohammad Basit | Sciencx (2023-02-28T01:57:23+00:00) Proxies in JavaScript: A Powerful Tool for Customization. Retrieved from https://www.scien.cx/2023/02/28/proxies-in-javascript-a-powerful-tool-for-customization/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.