How to Modify a Property using Data Descriptors in JavaScript

Back to: JavaScript Tutorial For Beginners and Professionals

How to Modify a Property using Data Descriptors in JavaScript

In this article, I am going to discuss How to Modify a property using Data Descriptors in JavaScript with Examples. Please read our previous article where we discussed How to Create a new Property using Data Descriptors in JavaScript with Examples.

How to Modify a property using Data Descriptors in JavaScript

When the property already exists in an object, the Object.defineProperty() method updates the existing property value and property flags directly on an object using Property descriptor (data and accessor descriptor).

Writable Attribute in JavaScript

The writable property in a property descriptor shows whether that property can be changed/modified or not. Using property descriptors, we can make a property read and write only. By default, it is false. The attribute is known as “non-writable” or read-only. The property is not writable which means we cannot assign a value. When set to true that means the value of the property can be changed later by using assignment operator (=) followed by the new value of a property.

  1. writable = false
  2. writable = true
writable = false /Read-Only Property/ non-writable Property

In the below example we have created a Person object with few properties and then used Object.defineProperty() method to add new property Pincode on Person object along with property data descriptor i.e.: writable. By default, it is false.

When it is set to false, the property becomes non-writable we cannot modify its value. Even if we set it with a new value the assignment didn’t work. Though no error will be thrown, it would throw an error when we use it in strict mode.

That is why when we set the person object newly added Pincode value to 400001, it won’t get updated rather will show the old value 400100 as the writable property is false. What we discussed above is given in the below example.

Example1: JavaScript Objects, update property using Object.defineProperty() descriptor writable=false
<html>
<head>
    <title>JavaScript Objects, update property using Object.defineProperty() descriptor writable=false example1</title>
</head>
<body>
    <script>
        //without strict mode
        //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
        //setting writable attribute to false so it won’t get modify
        Object.defineProperty(person, 'pincode', {
            value: 400100,
            writable: false
        });

        //display data
        console.log("*****without strict mode*****");
        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
        console.log("person Object pincode property value: ", person.pincode) //400100

        person.pincode = 400001; //assigned new value. No error thrown.
        console.log("person Object pincode property new value: ", person.pincode) //400100 new value assignment didn’t work.

    </script>
</body>
</html>
Output:

How to Modify a property using Data Descriptors in JavaScript with Examples

In strict mode, when setting the writable attribute to false even if we set it with a new value the assignment didn’t work. It would throw an error. What we discussed above is given in the below example.

Example2: JavaScript Objects, update property using Object.defineProperty() descriptor writable=false with strict mode
<html>
<head>
    <title>JavaScript Objects, update property using Object.defineProperty() descriptor writable=false with strict mode example2</title>
</head>
<body>
    <script>
        //strict mode
        'use strict';

        //Creates a Person Object
        let person = {
            firstName: "Angel",
            lastName: "Kathy",
            age: 25,
            location: "India"
        };

        Object.defineProperty(person, 'pincode', {
            value: 400100,
            writable: false
        });

        //display data
        console.log("*****strict mode*****");
        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
        console.log("person Object pincode property value: ", person.pincode)

        person.pincode = 400001; //TypeError: Cannot assign to read only property 'pincode'
        console.log("person Object pincode property new value: ", person.pincode)

    </script>
</body>
</html>
Output:

How to Modify a property using Data Descriptors in JavaScript

writable = true /Write-Only Property/ Writable Property

By taking a previous example Person object with few properties and then using Object.defineProperty() method for adding new property Pincode on Person object along with property data descriptor i.e.: writable. When it is set to true, the property becomes writable and we can modify its value. What we discussed above is given in the below example.

Example: JavaScript Objects, update property using Object.defineProperty() descriptor writable=true
<html>
<head>
    <title>JavaScript Objects, update property using Object.defineProperty() descriptor writable=true example</title>
</head>
<body>
    <script>
        //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
        //setting writable attribute to true so we can modify
        Object.defineProperty(person, 'pincode', {
            value: 400100,
            writable: true
        });

        //display data
        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
        console.log("person Object pincode property value: ", person.pincode) //400100

        person.pincode = 400001; //assigned new value.
        console.log("person Object pincode property new value: ", person.pincode) //400001

    </script>
</body>
</html>
Output:

How to Modify a property using Data Descriptors

In the next article, I am going to discuss How to Show or hide a property using Property Descriptors in JavaScript with Examples. Here, in this article, I try to explain How to Modify a property using Data Descriptors in JavaScript with Examples and I hope you enjoy this How to Modify a property using Data Descriptors in JavaScript with Examples article.

Leave a Reply

Your email address will not be published. Required fields are marked *