JavaScript Property Descriptors Enumerable, Writable & Configurable

Javascript Property Descriptors allow us to configure a JavaScript Property using the flags like enumerable, writable & configurable. We can read the Property Descriptors using the getOwnPropertyDescriptor and alter them using the DefineProperty.

What is Property Descriptors

Property Descriptors hold the configurations of an object’s property.

We can create a JavaScript object in many ways. Every property that we add to the object automatically gets its own Property descriptor. A property descriptor is a simple object and contains the metadata or information about the Property.

There are two types of Properties in JavaScript. Data Properties & Accessor Properties.

Data Properties maps to a value (i.e. primitive value, object, or function). Accessor Properties maps to getter & Setter methods. Each of these Property types also has its own Property Descriptors. Hence are two types of Property Descriptors.

  1. Data Descriptors ( for Data Properties)
  2. Accessor Descriptors (for getter & setter or Accessor Properties)

A JavaScript Property can have only one of the Descriptors. It cannot have both Descriptors.

Data Descriptors

Data Descriptors is for Data Properties. It contains the following fields

  • value
  • Writable
  • Enumerable
  • configurable

When we create a new object using the Object literal Syntax or any other method, JavaScript adds the descriptor for each Property. By default, it creates the property Writable, Enumerable & configurable set to true. The Value property is set to the value of the Property.

Accessor Descriptors

Accessor Descriptors is for Accessor Properties. It contains the following fields

  • set
  • get
  • Enumerable
  • configurable

When we create a getter & setter property using the Object literal Syntax JavaScript adds this descriptor to the property. By default, it creates the descriptor with Enumerable & configurable set to true. The get & set mapped to the getter & setter functions.

getOwnPropertyDescriptor

You can read the Property Descriptor of any property using the getOwnPropertyDescriptor method.

  1. It returns the Property Descriptor of the own property i.e. property directly present on the object.
  2. You can change the object, But it will not have any effect on the original property’s Descriptor.

Syntax

Where

obj is the object in which to look for the property.

prop name of the property whose description we want to retrieve

The following is a person object with name (accessor property) & age (data property) properties. We use the getOwnPropertyDescriptor to retrieve their descriptors

You can see from the output that the accessor property descriptor does not have writable & value property. The data property descriptor does not have get & set property

Property Descriptor of a Property in JavaScript

Also, note that configurable, enumerable & writable are set to true

Setting the Descriptors

We can modify the object returned by the getOwnPropertyDescriptor , but it will not change the descriptor of the original property

To change the descriptor of a Property, we can use the defineProperty or defineProperties method

defineProperty

The defineProperty adds a new property or modifies an existing property. It returns the object.

Syntax

Where

obj in which to look for the property.

prop is the name of the property whose description we want to add or modify.

descriptor for the property that wants to add or modify

For a new property, If we do not provide any values for Writable, Enumerable & configurable, then they are set to false. The value is set to undefined.

Example

The following code creates an empty person object. We then add the _name & age data properties & name getter & setter method using the defineProperty method.

You can pass an empty descriptor for a Property. In that case and if the property is new then the defineProperty will use the false as the default value for writable, enumerable, & configurable. The default value for value property is undefined.

But if the property already exists, the existing values are overwritten only if the values are provided.

defineProperties

It is similar to defineProperty but allows us to add or modify multiple properties

Syntax

Where

obj in which to look for the property.

props is an object whose each property must be a descriptor (either a data descriptor or an accessor descriptor). The name of the key becomes the property name.

Value

This Property of the Property Descriptor holds the Value of the Property.

Writable

Writable determines whether you can modify the value of the property or not. A false value makes property read-only.

The following code creates the age property with the value of 10 with writable as false.

Assigning a new value of 20 will fail. If you have use strict enabled, then JavaScript throws an error else it will fail silently.

In this example, we revert back the writable:false to writable:true. Now you can modify the property.

Enumerable

An enumerable flag determines if we can view the property using the for..in loop or Object.keys() method.

The person object in the following example has three properties. Both for..in loop & Object.keys() returns all three because enumerable by default set to true

We modify the prop2 and set its enumerable to false. Now both for..in loop & Object.keys() will not return prop2

Configurable

Configurable property if true allows us to modify the writable & enumerable property of an object. It also allows us to delete the property. But if it is set to false, then you cannot change the value of enumerable neither you can delete the property. It allows changing the writable from true to false but not from false to true. Once you set configurable as false, you cannot set it true again.

The following code makes the firstName non-configurable. Now you cannot modify its enumerable flag.

But you can change writable from true to false. But not from false to true.

Non-configurable properties cannot be deleted.

Setting configurable to false is a one-way street. You cannot set it to true again

Get & Set

The Get & Set property descriptors are mapped to the Getter and Setter functions. The getter & setter methods are known as accessor properties in JavaScript. They look like normal properties but are actually functions mapped to a Property.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top