JavaScript Meta Programming
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
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
This code is analyzing another piece of code (an object):
// Create an Object
const user = {name: "Jan", age: 40};
// Fill Array with Object keys
const myArr = Object.keys(user);
Try it Yourself »
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;
Try it Yourself »
Generate Dynamic Code
Metaprogramming involves dynamic code generation.
JavaScript can generate functions at runtime:
Metaprogramming Examples
| 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
Log changes to property values:
// 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";
Try it Yourself »
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
Log changes to property values:
// 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);
}
});
Try it Yourself »
