Understanding Property Descriptors in JavaScript Object

Understanding Property Descriptors in JavaScript Object

Before ES5, JavaScript has no way to determine the characteristic behavior of object property.

But with ES5, All Object properties are described by property descriptor in JavaScript. This Property descriptors are

  1. Writable
  2. Configurable
  3. Enumerable

Take a look at this example below

let myShoe = {
    size: 42
} 

Object.getOwnPropertyDescriptor(myShoe, “size" );
//Result ==>
 {  
  value: 42,
  writable: true, 
  enumerable: true, 
  configurable: true, 
 }

The above shows us the result of getting our Property Descriptor with their default values.

Aside from the value property, It includes three other characteristics: writable, enumerable, and configurable. We will look at each one of them and explain them in detail.

With Object.defineProperty(..) we can add a new property, or modify an existing one as shown below

Object.defineProperty(myShoe, “price”, 
{ 
 value: 2500, 
 writable: true, 
 configurable: true,
 enumerable: true,
 } );

Using defineProperty, we can add a property to myShoe object in a plain form.

myShow.price // result == 2500.

Writable The ability to change the value of object property in javascript is controlled by a writable property descriptor. Consider the following example

Object.defineProperty( myShoe, “location”, 
{ 
 value: Kaduna,
 writable: false, // not writable!
 configurable: true, 
 enumerable: true, 
} );

We set out the object property of address to writable equal to false. If we change the property value and call it again, we will get the old value.

myShoe.location = “Lagos
myShoe.location //Kaduna.

As we can see changing the value for the address to Lagos, fail, and result back to Kaduna Whenever we set the property descriptor of writable to false, the object property value cannot change. After it has been initially set.

Configurable

With configurable property set to true, it gives the ability to modify descriptor definition using the defineProperty(…) utility.

By default configurable property descriptor is set to true, changing configurable to false is one-way action, and cannot be undone!

Consider the following example

myShoe.brand = “2Bdesign”
Object.defineProperty( myShoe, “brand”, 
{ 
 value: 2Bdesign,
 writable: true, 
 configurable: false, //non configurable 
 enumerable: true, 
} );

If we attempt to change the configurable descriptor to true, we will get an error, because it is a one-way action and cannot be changed. With configurable descriptor set to false, we cannot perform the delete operation on the existing object property.

Enumerable This descriptor characteristic controls whether a property will show up in certain object-property enumerations e.g for…in loop. Setting the enumerable value to false prevents the object property from showing in such an enumeration action.

By default all user-defined object property has, it’s the enumerable value set to true.

But if you want to hide object property from appearing in enumerable action, you can get its enumerable descriptor property to false.

Consider the following

Object.defineProperty( myShoe, “category”, 
{
 value: fashion,
 writable: true, 
  configurable: true,  
 enumerable: false, //this will prevent the property from appearing in                  
                                 //enumerable action like for in loop
} );

This is all I have for today, please use the comment section below to ask questions and share your though. Thank You.