Introduction to JavaScript Reflect
JavaScript Reflect is new built in function similar to Math which provides number of Utility functions. It is not a function object so is not constructible. In ‘JavaScript Proxy()’, all the handler functions here are similar in JavaScript Reflect. This object provides Static functions which have similar naming convention as of JavaScript proxy().
Syntax:
We have all the static methods here with Reflect, so syntax would depend upon the method used.
Reflect.<method_name>(target, argument/ propertyKey)Also can be written as Function.prototype.<method_name>.
Static Methods of JavaScript Reflect
Given below are the static methods :
- Reflect.apply(target, thisArgument, argumentsList): Calls target function with specified arguments in argumentsList.
- Reflect.defineProperty(target, propertyKey, attributes): This reflect method returns a Boolean value is true if property is defined successfully.
- Reflect.construct(target, argumentsList[, newTarget]): This Reflect method is similar to new target(…argumentsList), which provides an option to specify prototype different from previous one.
- Reflect.deleteProperty(target, propertyKey): This Reflect method is similar to delete target[propertyKey], acts as a delete operator to a function.
- Reflect.getOwnPropertyDescriptor(target, propertyKey): This Reflect method is similar to getOwnPropertyDescriptor() which will return property descriptor on the property if exists else undefined.
- Reflect.get(target, propertyKey[, receiver]): This Reflect method returns property value. Works to get a property from an object as function.
- Reflect.getPrototypeOf(target): This Reflect method is similar to Object.getPrototypeOf().
- Reflect.isExtensible(target): This Reflect method is similar to Object.isExtensible(), and returns Boolean value true if the target here is extensible.
- Reflect.preventExtensions(target): This Reflect method is similar to Object.preventExtensions() and returns a Boolean value true if update is successful.
- Reflect.ownKeys(target): This Reflect method returns an array of target objects property keys which are not inherited.
- Reflect.setPrototypeOf(target, prototype): This Reflect method sets prototype of an object. And returns a Boolean value true if update is successful.
- Reflect.set(target, propertyKey, value[, receiver]): This Reflect method assigns values to properties and returns a boolean value true if update is successful.
Examples of JavaScript Reflect
Given below are the examples mentioned :
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect methods</h1>
<script>
const employee = {
employeename: 'Maurice',
employeeLOB: 'BCMS',
employer: function() {
document.write(`Quaaaack! My name is ${this.employeename}`);
}
}
document.write("Employee having employeeLOB: " + Reflect.has(employee, 'employeeLOB'));
document.write("<br/>");
document.write("Employee having ID: " + Reflect.has(employee, 'ID'));
document.write("<br/>");
document.write("Employee Keys: " + Reflect.ownKeys(employee));
document.write("<br/>");
document.write("Employee adding a new property to object: " + Reflect.set(employee, 'eyes', 'BCMS'));
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect apply() method</h1>
<script>
varapplyThis = function()
{
document.write(this);
}
Reflect.apply(applyThis, 'On using JavaScript Reflect apply method returning a maximum value from array of numbers ', []);
//calling function with variable number arguments
var numbers = [2,4,6,8,10];
document.write(Reflect.apply(Math.max, undefined, numbers));
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect deleteProperty() method</h1>
<script>
var n = { n1: 1, n2: 3, n3: 6 };
document.write(delete n.n1);
document.write("<br/>");
document.write(delete n['n1']);
document.write("<br/>");
document.write(Reflect.deleteProperty(n, 'n1'));
document.write("<br/>");
document.write('n.n1=' + n.n1);
document.write("<br/>");
document.write();
document.write("<br/>");
Object.seal(n);
document.write("<br/>");
document.write(delete n.n2);
document.write("<br/>");
document.write(delete n['n2']);
document.write("<br/>");
document.write(Reflect.deleteProperty(n, 'n2'));
document.write("<br/>");
document.write('n.n2=' + n.n2);
</script>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect get() method</h1>
<script>
var n = { n1: 9 };
document.write(n.n1);
document.write("<br/>");
document.write(n['n1']);
document.write("<br/>");
document.write(Reflect.get(n, 'n1'));
document.write("<br/>");
document.write();
n = { n2: 8, get num() { return this.n2; } };
document.write("<br/>");
document.write(n.num);
document.write("<br/>");
document.write(n['num']);
document.write("<br/>");
document.write(Reflect.get(n, 'num'));
document.write("<br/>");
document.write(Reflect.get(n, 'num', { n2: 3 }));
</script>
</body>
</html>Output:
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect isExtensible() method</h1>
<script>
var n = { n1: 4 };
document.write(Reflect.isExtensible(n));
document.write("<br/>");
Reflect.preventExtensions(n);
document.write(Reflect.isExtensible(n));
document.write("<br/>");
try {
document.write(Reflect.isExtensible(4));
}
catch (e) {
document.write(e);
}
document.write("<br/>");
document.write(Object.isExtensible(4));
</script>
</body>
</html>Output:
Example #6
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect getPrototypeOf() method</h1>
<script>
varsamplebutton = function(text) {
this.text = text;
};
samplebutton.prototype.click = function() {
document.write(this.text + ' has been clicked');
document.write("<br/>");
}
varmysampleButton = { text: 'has been promoted' };
document.write("<br/>");
document.write(Reflect.getPrototypeOf(mysampleButton) === Object.prototype);
document.write("<br/>");
Reflect.setPrototypeOf(mysampleButton, samplebutton.prototype);
document.write(Reflect.getPrototypeOf(mysampleButton) === samplebutton.prototype);
mysampleButton.click();
</script>
</body>
</html>Output:
Advantages of JavaScript Reflect
Given below are the advantages mentioned:
- It abstracts operations staying behind the common JavaScript objects.
- It provides reasonable way to forward actions as proxy traps.
- It has the ability of a program to inspect and modify its structure and its behavior on runtime.
- All the functions are introspection functions where internal details are queried at run time.
Conclusion
We have seen what is JavaScript Reflect and how is it implemented which is similar to JavaScript Proxy() implementation methods. We have seen how it works with few examples and also have gone through Reflect methods which we have. Also we have seen some of the advantages of JavaScript Reflect.