Create a Proxy wrapper

Written byPhuoc Nguyen

Created

02 Jan, 2024

In our previous post, we explored the basics of creating and using a Proxy object. We customized the `set` trap to add a simple validation to our target. Here's the code snippet that demonstrates what we did earlier:

const handler = {
    set: function(target, prop, value) {
        if (prop === 'age' && value < 0 || value > 120) {
            throw new Error('Invalid age');
            return;
        }
        target[prop] = value;
    },
};

In the `set` trap handler, we check if the user is trying to set the `age` property by looking at the `prop` parameter. Then, we verify if the `value` parameter is less than 0 or greater than 120. If both conditions are true, we throw an exception.

After that, we can create a Proxy for our person object using the Proxy constructor.

const target = {
    name: 'John Smith',
    age: 30,
};
const proxy = new Proxy(target, handler);

#Limitations to address

While this implementation is effective and gives us the power of Proxy, there are a few limitations we need to address.

Firstly, exposing the Proxy to end users is typically not a good idea. We should design the implementation in a way that hides the details.

Encapsulation is a fundamental concept in programming. It involves organizing code so that data and methods are grouped together as a single unit, such as a class. This principle also involves information hiding, which means that implementation details should be hidden from users. This is often referred to as the principle of least knowledge or the law of demeter (LoD). By following these principles, we can create more maintainable and robust code that is less prone to bugs.

In our case, it's important not to expose the inner workings of our Proxy implementation to users unless it's absolutely necessary.

The example we've been working with only applies to a specific target, like a person object. This makes it tough to reuse our code in different projects or with different objects. We'd have to copy and paste our code every time we want to use it on a new object.

Plus, if we wanted to add more traps or change how our proxy behaves, we'd have to update each instance of our code that uses that particular set of traps. This can get messy and lead to errors.

#A better approach

To solve these issues, we can create a wrapper function around our Proxy object that only shows the necessary interface while keeping the implementation details concealed. This is a great way to use the Proxy object effectively. By creating a wrapper, we can encapsulate the behavior we want to apply to our objects in a single function. This makes it much easier to use and manage.

For instance, let's say we have multiple `person` objects with different properties that require different validation rules. Instead of defining unique handlers for each object, we can create a single `withValidators` wrapper function. This function takes an object as an argument and returns a new proxy object with customized behavior that meets our validation requirements.

Here's a simple implementation of a wrapper that validates the `age` property.

const withValidators = (person) => {
    const handler = {
        set: function(target, prop, value) {
            if (prop === 'age' && value < 0 || value > 120) {
                throw new Error('Invalid age');
                return;
            }
            target[prop] = value;
        },
    };

    return new Proxy(person, handler);
};

To use the `withValidators` wrapper function, we just need to pass an object as an argument. The function will then return a new proxy object that applies customized behavior to the properties of the original object.

Here's an example of how to call the `withValidators` function:

const person = withValidators({
    name: 'John Smith',
    age: 30,
});

In this example, we passed an object with `name` and `age` properties to the `withValidators` function. The function returned a new proxy object that applies custom validation rules for the `age` property.

Once we have our `person` object wrapped in a proxy, we can access or set its properties just like any other object. However, if we try to set an invalid value to the `age` property, the custom validator in the handler will throw an error. This ensures that our `person` object meets the validation requirements we've set.

console.log(person.age);     // 30

person.age = 42;
person.age = -5;             // Throws an exception

As you can see, using a wrapper makes it easier to reuse our code and ensures consistency across all our objects. Plus, if we need to change how our proxies behave, we only have to update the wrapper function instead of changing each handler one by one. This saves us time and effort in the long run.

#Conclusion

To sum up, we've learned how to create a Proxy wrapper function that enables us to encapsulate the behavior we want to apply to our objects in one place. Wrapping our objects in a proxy with custom validation rules can help ensure consistency and reusability of our code.

It also simplifies the process of modifying the behavior of all our proxies at once by updating the wrapper function instead of modifying every handler individually.

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!

An introduction to JavaScript Proxy←

JavaScript Proxy vs Object.defineProperty→

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