Back to: JavaScript Tutorial For Beginners and Professionals
How to Create a new Property using Data Descriptors in JavaScript
In this article, I am going to discuss How to Create a new Property using Data Descriptors in JavaScript with Examples. Please read our previous article where we discussed JavaScript Object Property Descriptors with Examples.
How to Create a new property using Data Descriptors in JavaScript
When the property does not exist in an object, the Object.defineProperty() method creates the new property with a given value and property flags on an object using Property descriptor (data and accessor descriptor) otherwise if the property exists in an object, this method updates its flags. If a flag is not specified, it is considered false by default.
We will evaluate this with an example, for that we have created an empty object person using object literal and added a property firstName to an object named person using Object.defineProperty() method using data descriptors, then to get property descriptor full information about property firstName of person object for that we are using Object.getOwnPropertyDescriptor() method (as we already discuss getOwnPropertyDescriptor() in Object.getOwnPropertyDescriptor() method chapter)and passing object name person with property name firstName as parameters.
Later we are printing it using JSON.stringify() method as is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function. What we discussed above is given in the below example.
Example1: JavaScript Objects, add new property and get info using Object.getOwnPropertyDescriptor() descriptor
<html>
<head>
<title> JavaScript Objects, add new property and get info using Object.getOwnPropertyDescriptor() descriptor example1</title>
</head>
<body>
<script>
//Creates a Person Object
let person = {
firstName: "Angel",
lastName: "Kathy",
age: 25,
location: "India"
};
//to get object full information including property descriptor and flags
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
//JSON.stringify is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.
console.log(JSON.stringify(descriptor, null, 2))
</script>
</body>
</html>
Output:
We saw from the above example for property firstName of object person all the property flags are false by default. we can change them anytime. Now let’s see the effects of the property flags discussed earlier, by example.
In the below example we have used two-sample codes. In the first sample code we have created a Person object with few properties and then used the Object.defineProperty() method to add a new property Pincode on the existing Person object. As Object.defineProperty() defines a new property when the property does not exist in the object.
In the second sample code, we have created an empty object obj after that we are defining a new property firstProp on obj object. Here we saw how we can define a property on an empty object as well as on an existing object. What we discussed above is given in the below example.
Example2: JavaScript Objects, add new property using Object.defineProperty() method
<html>
<head>
<title>JavaScript Objects, add new property using Object.defineProperty() method example2</title>
</head>
<body>
<script>
//sample code1
//Creates a Person Object
let person = {
firstName: "Angel",
lastName: "Kathy",
age: 25,
location: "India"
};
//method defineProperty() to add property to an object or modifies attributes of an existing property
Object.defineProperty(person, 'pincode', {
value: 400100,
writable: false
});
//display data
console.log("*****Sample Code1*****");
console.log("person object: ", person)
console.log("person object length: ", Object.getOwnPropertyNames(person).length) //returns no. of keys present in an object
console.log("person object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(person)) //return ALL property keys.
console.log("person Object literal type? : ", typeof person);// object
//sample code2
// Creates a new empty object
var obj = {};
//object property added with
//defineProperty with a data property descriptor
Object.defineProperty(obj, 'firstProp', {
value: 10,
writable: true
}); // 'firstProp' property added in the Obj object and its value is 10
//display data
console.log("*****Sample Code2*****");
console.log("obj object: ", obj)
console.log("obj object length: ", Object.getOwnPropertyNames(obj).length) //returns no. of keys present in an object
console.log("obj object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(obj)) //return ALL property keys.
console.log("obj Object literal type? : ", typeof obj);// object
</script>
</body>
</html>
Output:
Example3: JavaScript Objects, add or update new property using Object.defineProperty() method
<html>
<head>
<title>JavaScript Objects, add or update new property using Object.defineProperty() method example3</title>
</head>
<body>
<script>
//sample code1
//Creates a student Object
let student1 = {};
//method defineProperty() to add property to an object or modifies attributes of an existing property
Object.defineProperty(student1, 'marks1', {
value: 65,
writable: false
});
student1.marks1 = 50;
//display data
console.log("*****Sample Code1*****");
console.log("student1 object: ", student1)
console.log("student1 object length: ", Object.getOwnPropertyNames(student1).length) //returns no. of keys present in an object
console.log("student1 object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(student1)) //return ALL property keys.
console.log("student1 Object literal type? : ", typeof student1);// object
console.log("student1 marks1 : ", student1.marks1);// 65
//sample code2
// Creates a new empty object
var student2 = {};
//object property added with
//defineProperty with a data property descriptor
Object.defineProperty(student2, 'marks2', {
value: 20,
value: 30,
value: 12 * 8,
writable: false
}); // 'marks2' property added in the Obj object and its value will be over-write by the last one that is 96
//display data
console.log("*****Sample Code2*****");
console.log("student2 object: ", student2)
console.log("student2 object length: ", Object.getOwnPropertyNames(student2).length) //returns no. of keys present in an object
console.log("student2 object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(student2)) //return ALL property keys.
console.log("student2 Object literal type? : ", typeof student2);// object
console.log("student2 marks2 : ", student2.marks2);// 96
</script>
</body>
</html>
Output:
In the next article, I am going to discuss How to Modify a property using Data Descriptors in JavaScript with Examples. Here, in this article, I try to explain How to Create a new Property using Data Descriptors in JavaScript with Examples and I hope you enjoy this How to Create a new Property using Data Descriptors in JavaScript with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
