Proxy & Reflection

Proxy and Reflection are two features introduced in ES6 (ECMAScript 2015) that provide advanced metaprogramming capabilities in JavaScript. Let's explore each of them with code examples:

Proxy:

The Proxy object is used to define custom behavior for fundamental operations (e.g., property lookup, assignment, function invocation) on objects. It allows you to intercept and customize the behavior of operations performed on objects.

const target = {
    name: 'Alice',
    age: 30
};

const handler = {
    get: function(target, prop, receiver) {
        console.log(`Getting property '${prop}'`);
        return target[prop];
    },
    set: function(target, prop, value, receiver) {
        console.log(`Setting property '${prop}' to '${value}'`);
        target[prop] = value;
    }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Output: Getting property 'name' followed by 'Alice'
proxy.age = 25; // Output: Setting property 'age' to '25'

In this example, we create a Proxy for the target object and define custom behavior for property access and assignment using a handler object. The get and set traps intercept property access and assignment, respectively, allowing us to log messages before performing the actual operation.

Reflection:

Reflection refers to the ability to inspect and manipulate objects and their properties at runtime. In JavaScript, reflection is facilitated by methods like Reflect.get(), Reflect.set(), and Reflect.construct(), which provide a standardized way to perform operations on objects.

const obj = {
    name: 'Bob',
    age: 25
};

console.log(Reflect.get(obj, 'name')); // Output: Bob

Reflect.set(obj, 'age', 30);
console.log(obj.age); // Output: 30

In this example, we use Reflect.get() to retrieve the value of the name property from the obj object and Reflect.set() to update the value of the age property.

Code Example:

Combining Proxy and Reflection, we can create more powerful and flexible metaprogramming constructs:

const target = {
    name: 'Alice',
    age: 30
};

const handler = {
    get: function(target, prop, receiver) {
        console.log(`Getting property '${prop}'`);
        return Reflect.get(target, prop, receiver);
    },
    set: function(target, prop, value, receiver) {
        console.log(`Setting property '${prop}' to '${value}'`);
        return Reflect.set(target, prop, value, receiver);
    }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Output: Getting property 'name' followed by 'Alice'
proxy.age = 25; // Output: Setting property 'age' to '25'

In this example, we use Proxy to create a trap for property access (get) and assignment (set). Inside the handler, we delegate the actual operation to the corresponding Reflect methods, enabling us to customize the behavior while maintaining the standard semantics of object operations.

Proxy and Reflection are powerful tools for metaprogramming in JavaScript, allowing developers to create more dynamic and flexible code that can adapt to various runtime scenarios. They are particularly useful for implementing features like data validation, access control, and aspect-oriented programming.