Metaprogramming
Metaprogramming refers to a number of ways a program can manipulate itself:
- Modify objects at runtime
- Inspect objects at runtime
- Control objects at runtime
- Intercept running operations
- Modify functions, and classes
- Generate dynamic code
Note: The Easy Explanation Normally, code handles data. With metaprogramming, code handles code.
Inspecting Objects
With the method Object.keys() you can inspect object properties.
Using Object.keys() is a simple example of metaprogramming.
Example
// Create an Object
const user = {name: "Jan", age: 40};
// Fill Array with Object keys
const myArr = Object.keys(user);
Modify Objects
I typical metaprogramming task is to modify object behaviour:
Example
// Create an Object
const person = {name: "John", age: 41};
// Define "name" to return "secret"
Object.defineProperty(person, "name", {
get() { return "secret"; }
});
let name = person.name;
Generate Dynamic Code
Metaprogramming involves dynamic code generation.
JavaScript can generate functions at runtime:
Example
const fn = new Function("a", "b", "return a + b");
Metaprogramming Examples
| Col 1 | Col 2 |
|---|---|
| Consept | Description |
| Validation | Restrict the values that can be set to a property |
| Logging | Display property changes using a Proxy |
| Debugging | Intercept an operation using a Proxy |
| Frameworks | Vue, MobX, and Svelte use metaprogramming to detect state changes |
| ORM / database mapping | Wrap objects and creates fields based on database schema |
| Dynamic APIs | Create functions or object structures at runtime |
Proxy Metaprogramming
The two objects Proxy and Reflect allow for programming at the meta level in JavaScript.
Proxy can be used to intercept property operations like reading or writing.
In the example below:
- A user object is wrapped in a Proxy
- The Proxy uses a set() trap to log whenever a property is set
Example
// Create an Object
const user = {name: "Jan", age: 40};
// Wrap the Object in a Proxy
const proxy = new Proxy(user, {
// Use a set trap
set(target, property, value) {
// Log changes
log(property + "; " + value);
return target[property];
}
});
// Change Properties
proxy.name = "John";
proxy.age = 45;
proxy.name = "Paul";
Proxy with Reflect
Reflect makes Proxy behavior match normal object behavior
In the example below:
- A user object is wrapped in a Proxy
- The Proxy uses a set() trap to log when a property is set
- The set trap uses Reflect.set() for safe forwarding
Example
// Create an Object
const user = {name: "Jan", age: 40};
// Wrap the Object in a Proxy
const proxy = new Proxy(user, {
// Use a set trap
set(target, property, value) {
// Log changes
log(property + ": " + value);
// Safe forwarding with Reflect
return Reflect.set(target, property, value);
}
});
Note: Learn More JavaScript Reflect Tutorial JavaScript Proxy Tutorial JavaScript Meta Reference