JavaScript Reflect

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).

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

Examples

With Reflect.has(), you get the **in** operator as a function.

With Reflect.delete(), you get the **delete** operator as a function.

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");

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");

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");

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");

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"]);

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"]);

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

});

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);

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);

Example

Reflect.isExtensible(1); // TypeError

Object.isExtensible(1);  // false (does not throw)

When to Use Reflect?

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);

  }

});

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:

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