An Introduction to JavaScript Proxy

JavaScript, Object, Proxy, Pattern · Apr 2, 2023

The JavaScript Proxy object is a relatively new addition to the language, having been introduced in ES6. It's based on the software design pattern of the same name, which creates a wrapper for another object, intercepting and redefining fundamental operations for that object.

A Proxy object is defined as follows:

const proxy = new Proxy(target, handler);

The target is the object that the proxy wraps around, while the handler is an object that contains one or more "traps" - functions that intercept operations performed on the target object.

There are a variety of available traps that can be used to customize the behavior of the target object. Here's a brief overview of all available traps and what each one does:

There are many common and novel use-cases for the Proxy object, utilizing one or more of these traps. Here's a simple example that intercepts a get call and returns null if the property doesn't exist in the target object:

const targetObj = { name: 'John', age: 30 };

const handler = {
  get(target, property) {
    return property in target ? target[property] : null;
  }
};

const proxyObj = new Proxy(targetObj, handler);

proxyObj.name; // 'John'
proxyObj.age; // 30
proxyObj.address; // null

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this