What is a Javascript Proxy?

What is a Javascript Proxy?

Written by Cody Jenson on Nov 15th, 2022 ・ Views ・ Report Post

Table of contents

In computing, a proxy is an intermediary between two devices that provides security, administrative control, and/or caching services. A Javascript proxy is used to create a proxy object for another object, which can intercept and recreate functionality for that object. In other words, it's like creating a copy of an object and the copy will be the one that's changed and applied to the real object with some additional rules.

This may sound confusing, but it's actually quite simple. Let's take a look at an example to see how it works.

How Proxies Work

Say you have an object with three properties, name, age, and able_to_drink (a boolean value indicating whether or not this person can drink). Let’s say for instance that we wanted to make sure this user is 21 or older before they can drink. Here's how you would do it without using a proxy:

let person = {
    name: 'John',
    age: 20,
    able_to_drink: false,
};

if(person.age >= 21){
    person.able_to_drink = false;
}

if(person.able_to_drink){
    console.log('🍻 Cheers, mate!');
} else {
    console.log('get outta here you youngster');
}

// OUTPUT 'get outta here you youngster'

Now let's take a look at how we can use a Proxy to make our lives easier:

let person = {  
    name: 'John',  
    age: 20,
    able_to_drink: false,  
};  
  
let personProxy = {   
    // when something is retrieved from the object run this
    get: function(target, name) {       
        return target[name];
    },
    // when something is trying to update the object run this
    set: function(target, name, value) {       
        if (name === 'age' && value >= 21) {    
            target['able_to_drink'] = true;
        }
        target[name] = value;      
    } 
};    

let proxy = new Proxy(person, personProxy);

console.log(proxy.age); // 20 (retrieved from the get() in our proxy)
console.log(proxy.able_to_drink); // false (nothing has changed yet)

proxy.age = 21; // able_to_drink will automatically update
console.log(proxy.able_to_drink); // true (this got changed from the set() trap)

if(person.able_to_drink){
    console.log('🍻 Cheers, mate!');
} else {
    console.log('get outta here you youngster');
}

// OUTPUT '🍻 Cheers, mate!'

As you can see, using a proxy is much simpler than using an if statement. And because proxies are objects themselves, they can be used in conjunction with other objects and functions. So that is a basic overview of Javascript proxies and how they work πŸ€™

Conclusion

Proxies can be extremely useful tools for developers. By allowing you to intercept and change functionality for an object, proxies give you a great deal of control over how that object behaves. However, it's important not to use proxies unnecessarily, as they can come with performance implications. When used correctly, though, proxies can be invaluable tools in your development arsenal.

Comments (0)