In JavaScript, Reflect is a built-in object that provides methods for interceptable JavaScript operations. These methods correspond to the default operations that can be intercepted by Proxy objects.
The Reflect object allows us to perform many low-level object manipulations like accessing properties, invoking methods, and applying functions in a way that is more consistent and readable.
The Reflect object is not a constructor, meaning you cannot instantiate it or create instances from it. Instead, it provides a set of static methods, each of which mirrors the behavior of various language operations (such as property access, function application, and object creation).
In this tutorial, we will cover several Reflect methods with examples, demonstrating how to use them in practical scenarios.
Table of Contents
1. Introduction to Reflect
The Reflect object includes methods that correspond to common JavaScript operations. These methods generally provide the same functionality as their native counterparts (like Object.getOwnPropertyDescriptor(), Function.prototype.apply(), etc.), but are more consistent in their behavior.
Here's a brief overview of some useful methods in the Reflect object:
Reflect.get(): Gets a property value from an object.
Reflect.set(): Sets a property value on an object.
Reflect.has(): Checks if a property exists in an object.
Reflect.deleteProperty(): Deletes a property from an object.
Reflect.ownKeys(): Returns all keys of an object.
Reflect.apply(): Calls a function with a specified this value and arguments.
Let's dive into each of these with examples.
2. Using Reflect.get() to Access Property Values
The Reflect.get() method is used to retrieve a property value from an object, similar to accessing the property using dot notation (obj.prop).
Example 1: Using Reflect.get()
const person = {
name: 'Alice',
age: 30
};
console.log(Reflect.get(person, 'name')); // Output: "Alice"
console.log(Reflect.get(person, 'age')); // Output: 30
Explanation:
Reflect.get() is used to access the name and age properties of the person object.
This method can be useful when you want a consistent way to access properties dynamically.
3. Using Reflect.set() to Modify Property Values
The Reflect.set() method allows you to set a property value on an object. It returns true if the assignment is successful, and false otherwise.
Example 2: Using Reflect.set()
const car = {
make: 'Toyota',
model: 'Corolla'
};
Reflect.set(car, 'model', 'Camry');
console.log(car.model); // Output: "Camry"
// Adding a new property
Reflect.set(car, 'year', 2021);
console.log(car.year); // Output: 2021
Explanation:
Reflect.set() sets the model property to ‘Camry' and adds a new property year with a value of 2021.
4. Using Reflect.has() to Check if a Property Exists
The Reflect.has() method checks if a property exists on an object. It behaves like the in operator.
Example 3: Using Reflect.has()
const book = {
title: 'JavaScript Guide',
author: 'John Doe'
};
console.log(Reflect.has(book, 'title')); // Output: true
console.log(Reflect.has(book, 'publisher')); // Output: false
Explanation:
Reflect.has() returns true if the title property exists on the book object and false for non-existent properties like publisher.
5. Using Reflect.deleteProperty() to Delete a Property
The Reflect.deleteProperty() method deletes a property from an object. It behaves like the delete operator but with more predictable return values.
Example 4: Using Reflect.deleteProperty()
const user = {
username: 'johndoe',
password: 'secret'
};
// Deleting the password property
Reflect.deleteProperty(user, 'password');
console.log(user); // Output: { username: 'johndoe' }
Explanation:
Reflect.deleteProperty() deletes the password property from the user object.
6. Using Reflect.ownKeys() to Get All Property Keys
The Reflect.ownKeys() method returns all property keys (including non-enumerable and symbol properties) of an object.
Example 5: Using Reflect.ownKeys()
const car = {
make: 'Honda',
model: 'Civic',
year: 2022
};
const keys = Reflect.ownKeys(car);
console.log(keys); // Output: ["make", "model", "year"]
Explanation:
Reflect.ownKeys() retrieves all keys from the car object, similar to Object.keys() but also includes symbol and non-enumerable properties.
7. Using Reflect.apply() to Call Functions
The Reflect.apply() method is used to call a function with a specified this value and arguments. It's similar to Function.prototype.apply() but more consistent and explicit.
Example 6: Using Reflect.apply()
function greet(greeting, name) {
return `${greeting}, ${name}!`;
}
// Using Reflect.apply to call the greet function
const message = Reflect.apply(greet, undefined, ['Hello', 'Alice']);
console.log(message); // Output: "Hello, Alice!"
Explanation:
Reflect.apply() is used to call the greet() function with undefined as the this value, passing ‘Hello' and ‘Alice' as arguments.
8. Using Reflect.construct() to Create New Instances
The Reflect.construct() method is used to create a new instance of a constructor function. It's similar to the new operator but offers more control over how the instance is created.
Example 7: Using Reflect.construct()
function Person(name, age) {
this.name = name;
this.age = age;
}
const alice = Reflect.construct(Person, ['Alice', 30]);
console.log(alice); // Output: Person { name: 'Alice', age: 30 }
Explanation:
Reflect.construct() is used to create a new instance of the Person constructor, passing ‘Alice' and 30 as arguments.
9. Using Reflect.defineProperty() to Define Properties
The Reflect.defineProperty() method is used to define a new property on an object or modify an existing one. It behaves similarly to Object.defineProperty().
Example 8: Using Reflect.defineProperty()
const obj = {};
// Defining a property with Reflect.defineProperty
Reflect.defineProperty(obj, 'name', {
value: 'Alice',
writable: true,
enumerable: true,
configurable: true
});
console.log(obj.name); // Output: "Alice"
Explanation:
Reflect.defineProperty() defines a new property name on the obj object, specifying descriptors like writable, enumerable, and configurable.
10. Using Reflect.getPrototypeOf() and Reflect.setPrototypeOf()
These methods allow you to get and set the prototype of an object, just like Object.getPrototypeOf() and Object.setPrototypeOf().
Example 9: Using Reflect.getPrototypeOf() and Reflect.setPrototypeOf()
const animal = { species: 'mammal' };
const dog = { breed: 'Golden Retriever' };
// Setting the prototype of dog to animal
Reflect.setPrototypeOf(dog, animal);
console.log(Reflect.getPrototypeOf(dog)); // Output: { species: 'mammal' }
console.log(dog.species); // Output: "mammal" (inherited from animal)
Explanation:
Reflect.setPrototypeOf() sets the prototype of dog to animal.
Reflect.getPrototypeOf() retrieves the prototype of the dog object.
11. Using Reflect.preventExtensions()
The Reflect.preventExtensions() method prevents new properties from being added to an object.
Example 10: Using Reflect.preventExtensions()
const obj = {
name: 'Alice'
};
// Preventing extensions on the object
Reflect.preventExtensions(obj);
obj.age = 30; // This will silently fail, as new properties cannot be added
console.log(obj); // Output: { name: 'Alice' }
console.log(Reflect.isExtensible(obj)); // Output: false
Explanation:
Reflect.preventExtensions() prevents any new properties from being added to the object obj.
The age property is not added to the object because extensions are disabled.
Conclusion
The Reflect object in JavaScript provides a set of powerful methods that allow you to perform various object operations in a consistent and reliable way. It complements the Proxy object, offering an API that mimics fundamental language operations.
Whether you're modifying property descriptors, applying functions, or manipulating prototypes, Reflect provides a cleaner, more predictable syntax for working with objects.
Key Points:
Reflect.get(): Access property values from objects.
Reflect.set(): Set or modify property values on objects.
Reflect.has(): Check if a property exists on an object.
Reflect.deleteProperty(): Delete properties from objects.
Reflect.ownKeys(): Retrieve all property keys (including non-enumerable ones).
Reflect.apply(): Invoke functions with a specific this value and arguments.
Reflect.construct(): Create new instances of constructor functions.
Reflect.preventExtensions(): Prevent the addition of new properties to an object.
By mastering Reflect, you can take more control over how you interact with objects and functions in your JavaScript applications!