JavaScript Proxy a first introduction

Recently I had my first production use-case for the Proxy object. So let me tell you a bit more about it and how you can use it in your code.

A Proxy object is a method that copies an object and can apply overwrites to specific functions.

This is a great way to intercept essential object functions like get or set.

JavaScript Proxy object

Let's start with a basic object definition.

const user = {
  firstName: 'Chris',
  lastName: 'Bongers',
  age: 10,
};

Now, let's proxy this object.

const proxyUser = new Proxy(user, handler);

The Proxy object takes two arguments, the first one is the original object and the second one is a handler. The handler defines which operations will be intercepted or modified.

Let's say we want to modify the get function.

const handler = {
  get(target, prop) {
    console.log('get called', target, prop);
    return target[prop].toUpperCase();
  },
};

In the above example, we log what is being called and modify the get always to return an uppercase variant.

Let's now try to get the first name of the person.

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);

// Returns: CHRIS BONGERS

Pretty neat!

Let's quickly take a closer look at the variables we received. The target holds the entire object, and the prop has the one that is being changed.

You can also only act on specific properties.

const handler = {
  get(target, prop) {
    if (prop === 'firstName') {
      return target[prop].toUpperCase();
    }
    return target[prop];
  },
};

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);

// Returns: CHRIS Bongers

In this case, only the firstName property will be returned in uppercase.

Type of handlers

We have seen the get handler being used, but there are more handlers we can leverage.

These handlers are often called traps, as they trap calls to the target object.

Here is a list of the traps we can overwrite.

apply
construct
deleteProperty
defineProperty
enumerate
get
getPrototypeOf
getOwnPropertyDescriptor
has
isExtensible
ownKeys
preventExtensions
set
setPrototypeOf

Each handler comes with its own set of properties. You can find the complete list on MDN.

MDN trap list

You can also try out the sample I prepared in this CodePen.

https://codepen.io/rebelchris/pen/vYRYaGq

Conclusion

We can use the Proxy object to overwrite or catch specific object actions.

By using proxies, we can leverage some normally inaccessible handlers. These handlers can then be applied to all or some of the properties of an object.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

JavaScript Proxy a first introduction

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

JavaScript Proxy object

Type of handlers

Conclusion

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

JavaScript Proxy object

Type of handlers

Conclusion

Thank you for reading, and let's connect!