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.
Table of Contents
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
1 2 3 | Object.defineProperty(obj, prop, descriptor) |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const person = {}; //Adding the firstName to the person object with the value 'Bill' Object.defineProperty(person, 'firstName', { value: "Bill", writable: true, configurable:true, enumerable:true }); console.log(person); //{firstName: "Bill"} |
The above code is the same as the following code
1 2 3 4 5 | const person = {}; person.firstName="Bill" console.log(person); //{firstName: "Bill"} |
Adding a getter & setters Property
The following example. shows how to add a getter & setter property
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | product ={ name : "Computer", price : 35000, _discount:0, // private member } Object.defineProperty(product, "discount", { get: function () { return this._discount; }, set: function (value) { console.log('setting discount '+value) this._discount = value; if (this._discount > 80) _discount = 80; }, configurable: true, enumerable: true, }); console.log(product.discount) product.discount=100 console.log(product.discount) |
Adding Multiple Properties
The following example adds multiple properties to a person object ( name accessor property & age data property).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | const person = {}; Object.defineProperty(person, "_name", { value: "", writable: true, configurable: true, enumerable: true, }); Object.defineProperty(person, "name", { get() { return this._name; }, set(value) { this._name = value; }, configurable: true, enumerable: true, }); Object.defineProperty(person, "age", { value: "30", writable: true, configurable: true, enumerable: true, }); |
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
1 2 3 | Object.defineProperties(obj, props) |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const person = {}; obj= { _name : { value: "", writable: true, configurable: true, enumerable: true, }, name : { get() { return this._name; }, set(value) { this._name = value; }, configurable: true, enumerable: true, }, age : { value: "30", writable: true, configurable: true, enumerable: true, } } Object.defineProperties(person,obj); console.log(person) |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const person = {}; person.firstName="Bill" console.log(person); //{firstName: "Bill"} Object.defineProperty(person, 'firstName', { value: "Gates", writable: true, configurable:true, enumerable:true }); console.log(person) //{firstName: "Gates"} |
References
Read More
