DefineProperty in JavaScript

DefineProperty is one of the ways in which you can add a new property to a JavaScript Object. You can also use it to Modify the property. We usually use it, when we want to alter the property descriptors or flags.

DefineProperty

The method defineProperty() adds a new property directly on an object, or modifies an existing property on an object, and returns the object.

Syntax

Where

obj is the object on which, we want to add a new property or modify an existing property.

prop is the name of the Property (or Symbol of the property) that we want to add or modify.

descriptor for the property being added or modified.

If the property prop doesn’t exist in the object, Object.defineProperty() creates a new property. If it already exists its descriptor is modified.

The defineProperty property method returns the updated obj after adding or modifying its property.

Descriptor

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

There are two kinds of Properties in JavaScript. They are Data Property & Accessor Property

The Data Property is normal key-value pair. The Accessor property uses the Getter & Setters Methods. Property Descriptors are different for the Data Properties & Accessor Properties.

The Property Descriptors for the Data Property are known as the data descriptor and that of the accessor property is known as the accessor descriptor.

Both the Descriptors are objects. Both of them contain configurable & enumerable properties. The data descriptor also has value & writable properties, while the accessor descriptor has get & set properties.

When creating a new property using the defineProperty, if the fields are omitted from the descriptor, the defineProperty will use the false as default values for configurable , enumerable & writable property.

DefineProperty Examples

Adding a Property

In the following example, we create an empty person object.

Later we add the firstName property to the person object with the value of Bill.

The above code is the same as the following code

Adding a getter & setters Property

The following example. shows how to add a getter & setter property

Adding Multiple Properties

The following example adds multiple properties to a person object ( name accessor property & age data property).

DefineProperties

To add multiple properties, we can make use of the DefineProperties method. It is similar to DefineProperty but allows us to add or modify multiple properties

Syntax

Where

obj is the object on which, we want to add or modify properties

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.

The following example shows, how you can add multiple properties using the DefineProperties method.

Modifying an existing property

If the property already exists, then Object.defineProperty() modify the property.

In the following example, we use defineProperty to modify the firstName.

References

DefineProperty

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