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.

Photo by pepe nero on Unsplash

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
}

You can find links to my other work on Medium and follow me here.

Generators in Javascript ES6

Iterables Javascript ES6

WeakSets in Javascript

I often share more code tips on my Instagram you can say hello to me on my Twitter or see how i code in my Github.

Thank you very much and keep coding!!!

Yoel