Flash cards
Review the key moves
What is the main idea behind JavaScript Reflect?
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.
The Reflect Object
Reflect is a object with methods for low-level operations on JavaScript objects.
With the Reflect object you can get, set, delete, and check object properties in a consistent way.
Reflect was added to JavaScript in ES6 (2015).
Yor Toolbox
Reflect is a toolbox for working with objects in a safe and consistent way.
Before Reflect
Before Reflect, object operations were scattered:
- Using operators like in and delete
- Using methods like Object.defineProperty
- Using language mechanisms like [[ Get ]] and [[ Set ]]
After Reflect
Reflect brings all object operations into clean methods :
- Reflect methods unifies object operations
- Reflect methods are more predictable than operators (in/delete)
- Reflect methods provides standard return values instead of errors
- Reflect methods are cleaner and safer for meta-programming
- Reflect methods are tailored for the Proxy object
Why Reflect
Reflect is safe and flexible, especially when used inside a Proxy.
Reflect.has()
The Reflect.has() method checks if an object has a specific property.
The Reflect.has() method is similar to the in operator.
Check if Property Exists
// Create an Object
const person = {name: "John", lastname: "Doe"};
let answer = Reflect.has(person, "name");| Syntax |
|---|
| Reflect.has(obj, prop) |
| Properties |
| obj - the target object prop - the property to check |
| Returns |
| true - if true false if false |
| Exeptions |
| TypeError thrown if obj is not an object |
Reflect.deleteProperty()
The Reflect.deleteProperty() method deletes a property from an object.
The Reflect.deleteProperty() method is similar to the delete operator.
Deleting a Property
// Create an Object
const person = {name: "John", lastname: "Doe"};
Reflect.deleteProperty(person, "name");| Syntax |
|---|
| Reflect.deleteProperty(obj, prop) |
| Properties |
| obj - the target object prop - the property to delete |
| Returns |
| true - if true false if false |
| Exeptions |
| TypeError thrown if obj is not an object |
Reflect.get()
The Reflect.get() method retrieves the value of a property:
Example
// Create an Object
const user = {name: "Jan", age: 40};
let age = Reflect.get(user, "age");| Syntax |
|---|
| Reflect.get(obj, prop [,receiver]) |
| Properties |
| obj - the target object prop - the property to get receiver - the this value if it is a getter |
| Returns |
| The value of the property |
| Exeptions |
| TypeError thrown if obj is not an object |
Reflect.set()
The Reflect.set() method sets the value of a property:
Example
// Create an Object
const user = {name: "Jan", age: 40};
Reflect.set(user, "age", 41);
let age = Reflect.set(user, "age");| Syntax |
|---|
| Reflect.set(obj, prop, value [,receiver]) |
| Properties |
| obj - the target object prop - the property to set value - the value to set receiver - the this value if it is a setter |
| Returns |
| true - for success false - if not |
| Exeptions |
| TypeError thrown if obj is not an object |
Reflect.apply()
The Reflect.apply() method calls a function with a this value and an argument array.
Example
function greet(message) {
return message + ", " + this.name;
}
const person = {name: "Jan"};
let msg = Reflect.apply(greet, person, ["Hello"]);| Syntax |
|---|
| Reflect.apply(function, this, arguments) |
| Properties |
| function - target object (function) this - the value of this calling the target arguments - array-like object of function arguments |
| Returns |
| The return value from the function |
| Exeptions |
| TypeError thrown if function is not a function or arguments is not an object |
Reflect.apply() is preferred when:
- You are doing meta-programming
- You are inside a Proxy handler
- You want consistent behaviors (no silent errors)
- You want to mirror JavaScript's internal operations
Reflect.construct()
The Reflect.construct() method acts like the new operator, creating a new instance of target with the provided arguments. newTarget allows for custom new.target values for subclassing.
Example
// Create a new Array
const colors = Reflect.construct(Array, ["red", "green", "blue"]);| Syntax |
|---|
| Reflect.construct(obj, args [, newTarget]) |
| Properties |
| obj - the constructor object args - an array-like object of arguments to be passed newTarget - the constructor |
| Returns |
| A new object constructed from the argumets list |
| Exeptions |
| TypeError thrown if obj or newTarget is not a constructor, or if args is not an object |
Reflect.defineProperty()
The Reflect.defineProperty() defines or modifies a property.
Example
// Create an Object
const user = {};
// Add a Property Reflect.defineProperty(user, "id", { value: 123, writable: false
});| Syntax |
|---|
| Reflect.defineProperty(obj, prop, attributes) |
| Properties |
| obj - the target object prop - the property to define attributes - an array-like object of the property attributes |
| Returns |
| Exeptions |
| TypeError thrown if obj is not an object or attributes is not an object |
Reflect.defineProperty() in Proxy
Reflect.defineProperty() must be used in Proxy
If used in a Proxy, the defineProperty trap must return true or false .
- Object.defineProperty() returns the target object Reflect.defineProperty() returns true or false
Reflect.ownKeys()
The Reflect.ownKeys(obj) method returns an array of an object's own property keys (string and Symbol based), similar to combining Object.getOwnPropertyNames() and Object.getOwnPropertySymbols().
Example
const sym = Symbol("secret");
const obj = { a: 1, [sym]: 2 };
let keys = Reflect.ownKeys(obj);| Syntax |
|---|
| Reflect.ownKeys(obj) |
| Properties |
| obj - the target object |
| Returns |
| An Array of the object's own property keys, including strings and symbols |
| Exeptions |
| TypeError thrown if obj is not an object |
Why Using Reflect?
Reflect.ownKeys() also returns symbols.
Object.keys() does not.
Reflect.isExtensible()
The Reflect.isExtensible() method Checks if an object is extensible (can have properties added), similar to Object.isExtensible().
Example
let answer = Reflect.isExtensible(obj);The same as using Object.isExtensible() :
let answer = Object.isExtensible(obj);| Syntax |
|---|
| Reflect.isExtensible(obj) |
| Properties |
| obj - the target object |
| Returns |
| true - is extensible false - is not |
| Exeptions |
| TypeError thrown if obj is not an object |
Why Using Reflect?
Object.isExtensible() is a user method - not part of the internal trap machinery.
Reflect.isExtensible() maps directly to the internal [[IsExtensible]] method.
Reflect.isExtensible() correctly handles primitive targets, which matters when proxied.
Reflect.isExtensible(1); // TypeError
Object.isExtensible(1); // false (does not throw)When to Use Reflect?
| Case | Use | Why |
|---|---|---|
| Getting / setting values | Yes | If you need consistent return values |
| Creating new objects | Yes | Reflect.construct() works with Proxy |
| Calling a function with context | Yes | Reflect.apply() is cleaner than func.apply() |
| Meta programming | Yes | Designed for low-level tasks |
| Simple object work | No | Use normal JS syntax |
Reflect with Proxy (Very Common)
Proxy lets you intercept operations on objects:
Example
// Create an Object
const user = { name: "Jan", age: 40 };
// Create a Proxy
const proxy = new Proxy(user, {
set(target, property, value) {
log(property + ": " + value);
// safe forwarding
return Reflect.set(target, property, value);
}
});Reflect can provide safe and unified forwarding calls.
Reflect ensures that a Proxy behaves like a normal object.
Proxy and Reflect
Proxy was designed first. Reflect was designed second.
Proxy was designed to allow JavaScript developers to:
- Intercept property access
- Override default property behaviors
- Validate data
- Wrap functions
- Virtualize objects
- Create reactive objects
The idea of Proxy was developed during the ES6 (2015) design phase before Reflect existed.
However, Proxy had a big issue:
"How to forward an intercepted operations safely?"
JavaScript had no functional equivalents of many operations.
Because of this limitation, Reflect was invented.
JavaScript Reflect History
Reflect was introduced because Proxy needed it.
Before Reflect
- delete, in, new were operators
- some operations threw errors
- object operations returned inconsistent values
- no generic version of property access existed
- no way to forward constructor calls
This made Proxy impossible to implement safely.
So ES6 (2015) introduced Reflect to
- provide clean, function-based versions of every internal operation
- return predictable booleans instead of objects
- avoid unnecessary errors
- mirror the JavaScript engine's behavior
- give Proxy traps a reliable forward-path
Learn More
JavaScript Metaprogramming JavaScript Proxy Tutorial JavaScript Meta Reference
JavaScript Proxy Tutorial JavaScript Meta Reference
JavaScript Meta Reference