Exploring Proxy in JavaScript: Advanced Functionality with Practical Examples

Gabriel Andres — Tue, 22 Oct 2024 16:05:05 +0000

JavaScript offers many interesting features, and one of the most powerful and less common is the Proxy object. This tool allows you to create an object that can intercept operations on other objects, such as accessing or modifying properties. In this post, we will explore how Proxy works, its uses, and how it differs from other similar functionalities like getters and setters.

What is a `Proxy`?

A Proxy acts as an intermediary for another object (called the "target"). You can define how the proxy should behave for different operations through a "handler." This allows you to customize how you interact with the underlying object.

Basic Syntax

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

Usage 1: Intercepting Property Access

Suppose we have an object representing a user, and we want to provide custom behavior when accessing its properties:

const user = {
    name: 'Gabriel',
    age: 30
};

const handler = {
    get: function(target, prop) {
        if (prop in target) {
            return target[prop];
        } else {
            return 'Property not found';
        }
    }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

You might consider using a getter to achieve similar behavior:

const userWithGetters = {
    name: 'Gabriel',
    age: 30,
    getProperty(prop) {
        return this[prop] || 'Property not found';
    }
};

console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found

The difference is that with Proxy, you can intercept any operation on the object, not just property access, which provides greater flexibility.

Usage 2: Property Validation

Imagine we want to ensure that when setting a user's age, only valid values are allowed. This is where Proxy shines:

const person = {
    name: 'Ana'
};

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

const personProxy = new Proxy(person, handler);

personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María

try {
    personProxy.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

You could use a setter to validate the value:

const personWithSetters = {
    _age: 0,
    name: 'Ana',
    set age(value) {
        if (value < 0 || value > 120) {
            throw new Error('Age must be between 0 and 120');
        }
        this._age = value;
    },
    get age() {
        return this._age;
    }
};

try {
    personWithSetters.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

The difference with Proxy is that you can apply validation more generally to any property, without needing to define getters and setters for each one.

Usage 3: Monitoring Changes

Imagine you want to keep track of changes made to an object. With Proxy, this is easily accomplished:

const data = {};

const handler = {
    set: function(target, prop, value) {
        console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
        target[prop] = value;
        return true;
    }
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

In an observable system, you would need to define a specific pattern to notify changes. With Proxy, you simply intercept the operation:

// Simulating a basic observable
class Observable {
    constructor(data) {
        this.data = data;
        this.listeners = [];
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    notify() {
        this.listeners.forEach(listener => listener(this.data));
    }
}

The difference is that using Proxy allows for a more direct and less verbose approach to intercept and respond to changes. With an observable, you'd have to manually manage notifications.

Conclusion

The Proxy object in JavaScript is an extremely powerful tool that allows you to intercept and redefine operations on objects. Unlike getters and setters, which are more restrictive and require more code, Proxy provides flexibility and a cleaner approach to validating, monitoring, and manipulating objects.

If you are looking to enhance your ability to work with objects in JavaScript, exploring Proxy is definitely worthwhile!

DEV Community: Gabriel Andres