Discover the power of a revocable Proxy

Written byPhuoc Nguyen

Created

14 Jan, 2024

A revocable JavaScript Proxy is a unique type of proxy that lets you create an object with the same behavior as another object, but with additional custom logic. What sets this type of proxy apart is its revocability, which means it can be easily revoked by calling a function on the original proxy object.

Revoking a proxy is an essential feature because it lets us control access to sensitive data or functionality. Once a proxy is revoked, any attempt to use it will result in an error. This is particularly useful when dealing with user authentication or handling secure transactions. Moreover, revocable proxies can help prevent memory leaks by allowing us to clean up unused objects and resources.

In this post, we'll explore the syntax and common uses of the revocable Proxy.

#Understanding the syntax of a revocable Proxy

If you want to create a revocable JavaScript Proxy, you'll need to use the `Proxy.revocable()` method. This method requires two arguments: the target object and a handler object. The target object is the object you want to proxy, while the handler object contains traps that define the custom logic for the proxy.

Here's an example:

const target = {
    name: "John Smith",
    age: 30,
};

const handler = {
    get(target, prop) {
        console.log(`Getting property '${prop}'`);
        return target[prop];
    },
    set(target, prop, value) {
        console.log(`Setting property '${prop}' to '${value}'`);
        target[prop] = value;
    },
};

const {proxy, revoke} = Proxy.revocable(target, handler);

In this example, we create a revocable proxy using `Proxy.revocable()`. We define two traps in our handler object - `get` and `set` - which log messages to the console whenever a property is accessed or modified. We then use destructuring assignment to assign both the proxy and a revoke function to separate variables.

Once we've created the proxy, we can access its properties just like we would with any other object.

console.log(proxy.name);    // Getting property 'name' John Smith
proxy.age = 42;             // Setting property 'age' to '42'

If we decide that we no longer want the proxy to be active, we can disable it by calling `revoke()`. Once revoked, any attempts to access or modify its properties will result in an error.

revoke();

// TypeError: Cannot perform 'get' on a proxy that has been revoked
console.log(proxy.age);

#Avoiding TypeError exceptions

It's crucial to keep in mind that some actions on a revocable proxy may throw a `TypeError` exception, particularly after it's been revoked. To prevent this from happening, you should always verify if the proxy is still active before making any changes to its properties.

To handle these exceptions, you can use a try-catch block. Here's an example to help you out:

try {
    console.log(proxy.name);
} catch (e) {
    console.log(`Error: ${e}`);
}

try {
    proxy.age = 42;
} catch (e) {
    console.log(`Error: ${e}`);
}

In this example, we've implemented two try-catch blocks to access and modify our proxy's properties. If an exception is thrown, we catch it and log an error message to the console.

By utilizing try-catch blocks and verifying the presence of active proxies before executing any operations, we can ensure that our code runs seamlessly without encountering any unexpected errors.

#Implementing caching with revocable Proxy

In this section, we'll show you a practical example of how to use revocable Proxy. We'll create a cache object that automatically expires either after a certain amount of time or when certain conditions are met. This can significantly improve your application's performance by reducing the number of server requests.

The `createCache()` function below is an excellent example of how revocable proxies can be used to implement caching.

const createCache = () => {
    const cache = new Map();
    const handler = {
        get(target, prop) {
            if (prop === "has") {
                return (key) => cache.has(key);
            }
            if (prop === "get") {
                return (key) => cache.get(key);
            }
            if (prop === "set") {
                return (key, value) => cache.set(key, value);
            }
            if (prop === "delete") {
                return (key) => cache.delete(key);
            }
        },
    };
    const { proxy, revoke } = Proxy.revocable({}, handler);

    // Automatically clear the cache after 5 minutes
    setTimeout(() => revoke(), 5 * 60 * 1000);

    return proxy;
};

To create a cache that automatically clears itself after a certain amount of time, we start by creating an empty Map object to store the cached data. Then, we define a handler object with traps for the `get`, `set`, `delete`, and `has` methods.

Next, we use `Proxy.revocable()` to create a revocable proxy for an empty object, passing in the handler object as the second argument. This allows us to control access to the cache and revoke it when needed.

To ensure that any cached data will be cleared after a certain amount of time has passed, we set a timer using the `setTimeout()` function that will automatically call `revoke()` on the proxy after 5 minutes. This ensures that the cache is cleared periodically to prevent excessive memory usage.

Finally, we return the proxy object which can now be used as a cache. Users can call its `get()`, `set()`, `delete()`, and `has()` methods just like they would with a regular Map object. However, once 5 minutes have elapsed, any attempts to access or modify its properties will result in an error due to the automatic revocation of the proxy.

Let me show you how to use the cache by setting a key-value pair, retrieving it with the `get()` method, and checking if it exists using the `has()` method.

const myCache = createCache();

myCache.set("foo", "bar");
console.log(myCache.get("foo"));    // bar
console.log(myCache.has("foo"));    // true

Let's wait for six minutes to confirm that the cache has automatically cleared. Once it does, we should see that trying to access the expired key returns `false`.

// Wait for the cache to expire
setTimeout(() => {
    console.log(myCache.has("foo"));    // false
}, 6 * 60 * 1000);

#Conclusion

In this post, we explored the syntax and common uses of the revocable Proxy in JavaScript. We learned how to create one using the `Proxy.revocable()` method and how to add custom logic using traps in the handler object. Plus, we learned how to avoid pesky TypeError exceptions while working with revocable proxies.

But that's not all – we also saw how to implement caching with revocable proxies by creating an automatic cache clearing mechanism. This not only ensures optimal performance but also prevents excessive memory usage.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Say goodbye to callback hell←

Build a SQL query builder→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn