Mastering JavaScript Proxy: Creative Use Cases for Dynamic Object Manipulation

JavaScript Proxy is a powerful feature that lets you create a wrapper around an object to intercept and redefine fundamental operations like getting, setting, or deleting properties. This makes it ideal for dynamic object manipulation and adding custom behaviors without changing the original object.

In this tutorial, we'll cover the basics of Proxy and explore creative examples to enhance your understanding, even if you're new to this concept.

### What is a Proxy in JavaScript?

A Proxy takes two parameters: the target object and a handler object. The handler contains traps, which are functions that intercept operations on the target object. For example, `get` intercepts property access, and `set` intercepts property assignment.

const target = {};

const handler = {
  get: function(obj, prop) {
    console.log(`Property '${prop}' was accessed`);
    return obj[prop];
  }
};

const proxy = new Proxy(target, handler);

proxy.name = 'Alice';
console.log(proxy.name);

In this code, when we access `proxy.name`, the `get` trap logs a message first, then returns the actual value.

### Use Case 1: Validation on Property Assignment

Proxy can validate values before they are set on an object. For example, if you want to ensure a user's age is always a positive number:

const user = { age: 25 };

const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value) || value <= 0) {
        throw new Error('Age must be a positive integer');
      }
    }
    obj[prop] = value;
    return true; // indicate success
  }
};

const proxyUser = new Proxy(user, validator);

proxyUser.age = 30; // Works
// proxyUser.age = -5; // Throws Error

This approach helps catch invalid data immediately during object updates.

### Use Case 2: Default Values for Missing Properties

You can return default values when accessing properties that don’t exist on the target object:

const defaults = {
  language: 'JavaScript',
  level: 'Beginner'
};

const handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : defaults[prop];
  }
};

const user = { language: 'Python' };
const proxyUser = new Proxy(user, handler);

console.log(proxyUser.language); // 'Python'
console.log(proxyUser.level);    // 'Beginner'
console.log(proxyUser.framework); // undefined

This fixes missing properties by transparently providing fallback values.

### Use Case 3: Logging Property Accesses

Proxies can help track when properties are read or updated, which is useful for debugging or analytics:

const book = { title: '1984', author: 'George Orwell' };

const logger = {
  get(target, prop) {
    console.log(`Reading property '${prop}'`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property '${prop}' to '${value}'`);
    target[prop] = value;
    return true;
  }
};

const proxyBook = new Proxy(book, logger);

console.log(proxyBook.title);
proxyBook.author = 'Orwell';

This way, every access and update is logged automatically.

### Summary

JavaScript's Proxy object empowers you to customize and extend the behavior of objects easily and dynamically. From validation, default values, to detailed logging, Proxies unlock many creative possibilities without complex inheritance or design patterns.

Experiment with these examples and explore the many other traps such as `deleteProperty`, `has`, and `apply` for functions to master dynamic object manipulation.