JavaScript Object Property Descriptors

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Object Property Descriptors with Examples

In this article, I am going to discuss JavaScript Object Property Descriptors with Examples. Please read our previous article where we discussed Object Property flags and descriptors /Object properties configuration in JavaScript.

Object.defineProperty() method in JavaScript

We already saw how we can add a new property in an object while declaring an object, and also even if the object is already declared we can still add new properties in an object by using dot notation (.) or square bracket notation ([]) with new property/key name followed by assignment operator (=) with property value.

Along with, in the same way how we can change the object existing property value simply by writing the name of the object and using dot notation (.) or the bracket notation ([]) with property/key name followed by assignment operator (=) with the new value.

As we saw the various ways for creating/ defining a new and updating an existing property to an object. Here comes another way for adding a new and modifying the existing property of an object is by using the Object.defineProperty() method.

Object.defineProperty() method is an in-built method provided by JavaScript used for adding a new property to an empty object or updating the existing property value of an object using Property descriptor (this will see in the coming topic).

Syntax: Object.defineProperty(obj, propName, descriptor)

Parameters:

1. obj – It is an object name on which property is defined.
2. propName – The name of the property or Symbol of the property to be defined or modified.
3. descriptor – The descriptor for the property being modified or defined. It can be a data descriptor or accessor descriptor (property descriptor).

Object.defineProperty() method can be invoked with the following options:

Note: By default, the property added by using Object.defineProperty() method are immutable (Objects whose value cannot be changed) and not enumerable (an object that cannot be counted and doesn’t show up when iterating using loop are called non-enumerable). In short, the property added by this method is not enumerable, not configurable, not writable as defaults.

When creating a property using Object.defineProperty() if there is no attribute specified in the object. This method will use their default values. That means Properties created using method Object.defineProperty() have an enumerable flag set to false by default, configurable flag set to false by default, and writable flag set to false by default.

Property Descriptors in JavaScript

Property descriptors present in Object.defineProperty() come in two main varieties:

1. Data Descriptors:
2. Accessor Descriptors (property accessor):

Both data descriptors and accessor descriptors are objects. They share the below listed following optional keys.

Note: The defaults value mentioned here are in the case when properties are defined using Object.defineProperty() without any parameters:

1. configurable: By default, it is false. When set to true that means the type of this property descriptor can be modified or updated later and the property can be deleted from the respective object.
2. enumerable: By default, it is false. When set to true that means this property can be counted and show up when iterating using a loop (for… in) are called enumerable or during enumeration of the properties. To check whether a property is enumerable or not, the function called propertyIsEnumerable() is used. It returns true if the object property is enumerable otherwise returns false.

Data Descriptors in JavaScript:

A data descriptor is a value of a property, which can or cannot be writable(modify).

1. Required fields: value or writable or both also
2. Optional fields: configurable, enumerable

Example:

A data descriptor also has the following attributes:

1. value: By default, it is undefined. It is the value of the property defined. The value can be any JavaScript value that is number, string, function, object, etc.
2. writable: By default, it is false. it is read-only. When set to true that means the value of the property can be changed by using assignment operator (=) followed by the new value of a property.

Accessor Descriptors (Property Accessor) in JavaScript:

A data descriptor is a value of a property, which can or cannot be writable(modify). An accessor descriptor or property accessor is a property described by a getter-setter accessor combination of functions. A descriptor must be one of these two options; either getter or setter, it cannot be both.

Getter is for reading or fetching the property value whereas setter it for setting a new or modifying the existing value of a property.

1. Required fields: get or set or both
2. Optional fields: configurable, enumerable

Example:

An accessor descriptor/property accessor also has the following optional:

1. get: By default, it is undefined. It’s a get method that is a getter for the property, it makes the property read-only. This method returns a value of the property which means it is used for getting/fetching the property value. If no getter is provided it is undefined.
2. set: By default, it is undefined. It’s a set method that is a setter for the property, it makes the property writable. This method accepts a new value as an argument getting assigned to the property which means it is used for setting a new value or modifying the existing value of a property. If no setter is provided it is undefined.

If a property descriptor does not have value, writable, get, and set keys, it is considered as a data descriptor. An exception is thrown If a property descriptor has both [value or writable] and [get or set] keys. How to make property writable, enumerable, and configured will see this in the next chapter.

In the next article, I am going to discuss How to Create a new Property using Data Descriptors in JavaScript with Examples. Here, in this article, I try to explain JavaScript Object Property Descriptors with Examples and I hope you enjoy this JavaScript Object Property Descriptors article.