DEV Community

Cover image for JavaScript Proxy
Suprabha
Suprabha

Posted on

8 4

JavaScript Proxy

A JavaScript Proxy is an object that wraps another object and intercepts the fundamental operations of the target object.

syntax:

let proxy = new Proxy(target, handler);
Enter fullscreen mode Exit fullscreen mode
  • target – is an object to wrap, can be anything, including functions.
  • handler – proxy configuration: an object with “traps”, methods that intercept operations. – e.g. get trap for reading a property of targetset trap for writing a property into target, and so on.

Let's look a quick example by defining an object called user:

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

// defining a handler function
const handler = {}

// now, create a proxy
const userProxy = new Proxy(user, handler);
Enter fullscreen mode Exit fullscreen mode

userProxy object uses the user object to store data. The userProxy can access all properties of the user object.

Let’s see the output:

console.log(userProxy.firstName); // suprabha
console.log(userProxy.lastName); // supi
Enter fullscreen mode Exit fullscreen mode

If you modify the original object user, the change is reflected in the userProxy

user.firstName = 'sam';
console.log(userProxy.firstName); // sam
Enter fullscreen mode Exit fullscreen mode

Similarly, a change in the userProxy object will be reflected in the original object user:

proxyUser.lastName = 's';
console.log(user.lastName); // s
Enter fullscreen mode Exit fullscreen mode

There are methods in proxy, here we will cover most important methods:

  1. get
  2. set
  3. apply

1️⃣ get:

The handler.get() method is a trap for getting a property value.

Also you can make the changes using get :

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

// defining a handler function
const handler = {
    get(target, prop, receiver) {
    return "sumi";
  }
}

// now, create a proxy
const userProxy = new Proxy(user, handler);

console.log(userProxy.firstName) // sumi
console.log(userProxy.lastName)  // sumi
Enter fullscreen mode Exit fullscreen mode

As of now we don’t have fullUserName in user object, so let’s create it in proxy using get trap:

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

const handler = {
    get(target, property) {
        return property === 'fullUserName' ?
            `${target.firstName} ${target.lastName}` :
            target[property]
    }
};

const userProxy = new Proxy(user, handler)

console.log(userProxy.fullUserName) // suprabha supi
Enter fullscreen mode Exit fullscreen mode

2️⃣ set:

set trap controls behaviour when a property of the target object is set.

So, let’s say you have to add some condition, so you can do it in set trap.

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
        age: 15
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('Age should be in number!');
            }
            if (value < 18) {
                throw new Error('The user must be 18 or older!')
            }
        }
        target[property] = value;
    }
};

const userProxy = new Proxy(user, handler);

// if you try to set age to bool, you will get error
userProxy.age = true;
// Error: Age must be a number.

userProxy.age = '16';
// The user must be 18 or older.

userProxy.age = '20'
// no errors would be found
Enter fullscreen mode Exit fullscreen mode

3️⃣ apply

The handler.apply() method is a trap for a function call. Here is the syntax:

let proxy = new Proxy(target, {
    apply: function(target, thisArg, args) {
        //...
    }
});
Enter fullscreen mode Exit fullscreen mode

Now, lets follow the above example by captialzing the first and last name.

const user = {
    firstName: 'suprabha',
    lastName: 'supi'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}

const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user)); // SUPRABHA SUPI
Enter fullscreen mode Exit fullscreen mode

Reference 🧐

Buy Me A Coffee

Top comments (3)

Collapse
 
ones66790 profile image
ones66790 • Edited

This kind of guides are very useful for the beginners. I have had a hard time, trying to make this code work, a lot of errors and I just wasn't able to find a good solution for them. Now it's more clear how I should have acted. There are still a lot of things for me to learn in codding, and speedproxies.net/residential-proxies helps me a lot in it. I can have access to some sources of information which are limited in my country, but using a residential proxy makes it possible.

Collapse
 
suprabhasupi profile image
Suprabha

Thank you ☺️

Collapse
 
blackmandfg profile image
Blackmandfg

Thanks for sharing this, helped me a lot.

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️