JavaScript - The Reflect Object
JavaScript Reflect
In JavaScript, Reflect is a global object and was introduced in ECMAScript 6 (ES6). It contains static methods, providing a better way to interact with the object at runtime.
Unlike most global objects, Reflect is not a constructor. You cannot use it with the new operator or invoke the Reflect object as a function. All methods of Reflect are static just like the Math object.
It contains various methods to access, update, delete, etc. properties from the object at run time.
Key Features of the Reflect Object
Object construction − The Reflect API allows to create objects at run time using the Reflect.construct() method.
Function invocation − The apply() method of the Reflect API is used to invoke a function or object method by passing the context and argument.
Object property manipulation − A Reflect API has different methods to set, update, or delete the object properties. Also, it can handle the extension of the object by preventing it.
Syntax
Following is the syntax to use the method of the Reflect API −
Reflect.method();
In the above syntax, the 'method' is the generalization. It can be any method of the Reflect API, such as get, set, apply, construct, has, etc.
Reflect Methods
In the following table, we have listed all the methods of Reflect −
Examples
Example 1
In the example below, we have defined a car object. The 'prop' variable contains the property name in the string format.
We use the get() method of the Reflect object to access the 'model' property from the car object. We passed the object name as a first parameter of the get() method and the property name as a second parameter.
In the output, you can see the value of the 'model' property.
<html>
<body>
<div id="output">The model of the car is: </div>
<script>
const car = {
name: "Audi",
model: "Q6",
price: 7000000,
}
let prop = "model";
let model = Reflect.get(car, prop);
document.getElementById("output").innerHTML += model;
</script>
</body>
</html>
Output
The model of the car is: Q6
Example 2
In the example below, we used the set() method to set the property into the object. The set() method takes an object, property name, and value as a parameter.
The output shows the 'doors' property value. In this way, you can set the property into the object at run time using the set() method of the Reflect API.
<html>
<body>
<div id="output">The total doors in the Audi Q6 is: </div>
<script>
const car = {
name: "Audi",
model: "Q6",
price: 7000000,
}
const model = Reflect.set(car, "doors", 4);
document.getElementById("output").innerHTML += car.doors;
</script>
</body>
</html>
Output
The total doors in the Audi Q6 is: 4
On executing the above script, the output window will pop up, displaying the text on the webpage.
Example 3
In the example below, we used the has() method to check whether the particular property exists in the object dynamically.
Both symbols look similar but are different, which you can see in the output.
<html>
<body>
<p id="output"></p>
<script>
const car = {
name: "Audi",
model: "Q6",
price: 7000000,
}
const isName = Reflect.has(car, "name");
if (isName) {
document.getElementById("output").innerHTML = "The Car object contains the name.";
}
</script>
</body>
</html>
Output
The Car object contains the name.
