Flash cards
Review the key moves
What is the main idea behind JavaScript Meta Programming?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
// ___ an ObjectPut the learning moves in the order that makes the concept easiest to apply.
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
// 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.
Example
const fn = new Function("a", "b", "return a + b");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);
}
});Learn More
JavaScript Reflect Tutorial JavaScript Proxy Tutorial JavaScript Meta Reference
JavaScript Proxy Tutorial JavaScript Meta Reference
JavaScript Meta Reference