How I use Reflect with Object Properties in ES6
Reflect is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of proxy handlers. Reflect
is not a function object, so it's not constructible.
Let´s talk about we have an object with a name,
let myObj = { name: "John" };
And I want to dynamically add, modify and delete a property lastName, how do I do it?
Add a property
Well I can for example use Object.defineProperty() like this,
Object.defineProperty(myObj, "lastName", { value: "Travolta" });
But how exactly do I know that lastName property has been created?
This case I have to use a try/catch to see if that lastName property is defined.
try {
Object.defineProperty(myObj, "lastName", { value: "Travolta" });
// Yeah is defined
} catch {
// error
}
the simplest option in that case is,
Add a property with Reflect
In this particular case we are going to add a property with Reflect.defineProperty(), which returns a Boolean so it is easier to check if our object property exists.
So let´s apply Reflect.defineProperty() to our example.
if ( Reflect.defineProperty(myObj, "lastName",
{ value: "Travolta", configurable: true, writable: true}) ){
// Yeah is defined
console.log(myObj.lastName) // Travolta
} else {
// Not defined
}
Super simple no?
But how about if I want now to dynamically update the property lastName, how do I do it?
Modifying a property
How can we modify this variable lastName? Using object[key] = value ?
if ( Reflect.defineProperty(myObj, "lastName",
{ value: "Travolta", configurable: true, writable: true}) ){
// Yeah is defined
console.log(myObj.lastName) // Travolta
myObj["lastName"] = "Malkovic";
console.log(myObj.lastName); // Malkovic
} else {
// Not defined
}
But we can do it more simple with the Reflect.set() method because as well its returning a Boolean if the set will be done correctly.
if ( Reflect.defineProperty(myObj, "lastName",
{ value: "Travolta", configurable: true, writable: true}) ){
// Yeah is defined
console.log(myObj.lastName) // Travolta
if (Reflect.set(myObj, "lastName", "Malkovic")) {
console.log(myObj.lastName); // Malkovic
}
} else {
// Not defined
}
But how about if I want now to dynamically delete the property lastName, how do I do it?
Deleting a property
How can we delete this variable lastName? Using delete object.property ?
if ( Reflect.defineProperty(myObj, "lastName",
{ value: "Travolta", configurable: true, writable: true}) ){
// Yeah is defined
console.log(myObj.lastName) // Travolta
if (Reflect.set(myObj, "lastName", "Malkovic")) {
console.log(myObj.lastName);
delete myObj.lastName;
console.log(myObj.lastName); // Undefined
}
} else {
// Not defined
}
But we can do it more simple with the Reflect.deleteProperty() method because as well its returning a Boolean if the set will be done correctly.
if ( Reflect.defineProperty(myObj, "lastName",
{ value: "Travolta", configurable: true, writable: true}) ){
// Yeah is defined
console.log(myObj.lastName) // Travolta
if (Reflect.set(myObj, "lastName", "Malkovic")) {
console.log(myObj.lastName);
if (Reflect.deleteProperty(myObj, "lastName")) {
console.log(myObj.lastName); // Undefined
}
}
} else {
// Not defined
}