How to Delete or Remove a property using JavaScript Property Descriptors

Back to: JavaScript Tutorial For Beginners and Professionals

How to Delete or Remove a Property using JavaScript Property Descriptors

In this article, I am going to discuss How to Delete or Remove a property using JavaScript Property Descriptors with Examples. Please read our previous article where we discussed How to Show or Hide a property using Property Descriptors in JavaScript with Examples

How to Delete/Remove a property using JavaScript Property Descriptors

When the property already exists in an object, the Object.defineProperty() method deletes the existing property of an object and modifies its attributes using the Property descriptor configurable attribute.

Configurable Attribute in JavaScript

In general, we know that word configurable implies configuring or changing something. Hence, the -configurable flag of the property descriptor is used to control whether the property can be deleted from an object and whether its attributes such as enumerable can be changed. But it allows changing writable and value flags.

By default, it is false. The attribute is considered as “non-configurable”. It prevents modification of property, and it also prevents deletion of property from the object. When set to true that means the type of this property descriptor can be modified later and the property can be deleted from the respective object.

• configurable=false
• configurable=true

configurable=false/ Lock Property Description/ Non- configurable Property

Using a Non-configurable property flag an Object property’s descriptor can make the object locked so no changes can be made to it as it prevents to do any changes. By default, it is false. This attribute is considered as non-configurable (configurable: false) or Lock property description.

When configurable is set to false, we cannot change the enumerable flag value neither we can delete the property of an object. While it allows changing the writable flag from true to false but not from false to true. Once we set the configurable flag as false, we cannot set it true again.

When trying to change the non-configurable property flag (except writable and value) TypeError will be thrown. So, to conclude, there are four things that are impacted by making a property non-configurable.

1. We cannot change the enumerable attribute/flag,
2. We cannot change the configurable attribute,
3. We can change the writable flag from true to false, but not from false to true
4. We cannot delete the property.

Thus, we got to know non-configurable property preventing its value modification which adds another layer of protection.

Non-configurable Property in JavaScript

Let’s understand non-configurable property by considering previous example Person object with few properties and then using Object.defineProperty() method to define a non-configurable property pincode on Person object by using property descriptor i.e.: configurable=false then to get property descriptor full information about property pincode 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 pincode as parameters.

Later we are printing it using JSON.stringify() method as is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.
let descriptor = Object.getOwnPropertyDescriptor(person, ‘pincode’);
console.log(JSON.stringify(descriptor, null, 2))

Once we define the non-configurable property, if we try to change the enumerable flag, it will not work and throws TypeError. Hence, we cannot change the enumerable flag
Object.defineProperty(person, ‘pincode’, {
enumerable: false //Uncaught TypeError: Cannot redefine property: pincode
});

It is one way that once we made a non-configurable property, we cannot make it configurable again it will not work and throws TypeError
Object.defineProperty(person, ‘pincode’, {
configurable: true //Uncaught TypeError: Cannot redefine property: pincode
});

However, we can still change the writable flag from true to false, though will not be able to change a person.pincode or its flags all this won’t work as it makes a person.pincode forever sealed
Object.defineProperty(person, “pincode”, {
writable: false //it will work
});
person.pincode = 400001 //Uncaught TypeError: Cannot assign to read only property ‘pincode’

But we cannot change the writable flag from false to true which means we cannot make it writable again it will not work and throws TypeError
Object.defineProperty(person, “pincode”, {
writable: true //Uncaught TypeError: Cannot redefine property: pincode
});

We cannot delete a non-configurable property to do so it will throw a TypeError
delete person.pincode; //Uncaught TypeError: Cannot delete property ‘pincode’

Example1: What we discussed above is given in the below example.

JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=false, writable=false, lock property modification and deletion also on redefine TypeError thrown for non-configurable

<html>
<head>
    <title>
        JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=false, writable=false, lock property modification and deletion also on redefine TypeError thrown for non-configurable example1</title>
</head>
<body>
    <script>
        'use strict'
        //Creates a Person Object
        let person = {
            firstName: "Angel",
            lastName: "Kathy",
            age: 25,
            location: "India",
            pincode: 400100
        };

        //to get object full information including property descriptor and flags
        let descriptor = Object.getOwnPropertyDescriptor(person, 'pincode');

        //JSON.stringify is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.
        console.log(JSON.stringify(descriptor, null, 2))

        //method defineProperty() to add property to an object or modifies attributes of an existing property
        //set configurable attribute of pincode property to false (non-configurable) so this will prevent changes
        Object.defineProperty(person, 'pincode', {
            configurable: false
        });

        //cannot redefine/change the enumerable flag of non-configurable property it won’t work, TypeError thrown
        Object.defineProperty(person, 'pincode', {
            enumerable: false  //Uncaught TypeError: Cannot redefine property: pincode
        });

        //cannot make/redefine non-configurable property as configurable property it won’t work, TypeError thrown
        Object.defineProperty(person, 'pincode', {
            configurable: true  //Uncaught TypeError: Cannot redefine property: pincode
        });

        //we can change the writable attribute of non-configurable property from true to false, it will work
        Object.defineProperty(person, "pincode", {
            writable: false //it will work
        });

        // won't be able to change property value or its flags all this won't work as writable is false:
        //it makes person.pincode forever sealed
        person.pincode = 400001 // Uncaught TypeError: cannot assign to read only property 'pincode'
        console.log("person object pincode property new value: ", person.pincode)

        //cannot make it writable property again or change the writable attribute of non-configurable property from false to true, it won’t work
        Object.defineProperty(person, "pincode", {
            writable: true // Uncaught TypeError: cannot redefine property: pincode
        });

        //cannot delete a non-configurable property, it won’t work
        delete person.pincode; //Uncaught TypeError: Cannot delete property 'pincode'
        console.log("person Object: ", person)
        
    </script>
</body>
</html>

Output:

Now we will represent the above non-Configurable example Person object with Pincode property using Get & Set Property descriptor. As we already saw this in the Property Descriptors chapter. Getter is for reading the property value whereas setter is for setting a new or modifying the existing value of a property.

The getter and Setter methods are known as accessor descriptor/property accessor in JavaScript.

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.

Example2: What we discussed above is given in the below example.

JavaScript Objects, update property using Object.defineProperty() descriptor configurable=false, writable=false with property accessor lock property modification and deletion also on redefine TypeError thrown for non-Configurable

<html>
<head>
    <title>
        JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=false, writable=false with property accessor lock property modification and deletion also on redefine TypeError thrown for non-configurable example2</title>
</head>
<body>
    <script>
        'use strict'
        //Creates a Person Object
        let person = {
            firstName: "Angel",
            lastName: "Kathy",
            age: 25,
            location: "India",
            pincode: 400100
        };

        //to get object full information including property descriptor and flags
        let descriptor = Object.getOwnPropertyDescriptor(person, 'pincode');

        //JSON.stringify is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.
        console.log(JSON.stringify(descriptor, null, 2))

        //method defineProperty() to add property to an object or modifies attributes of an existing property
        //set configurable attribute of pincode property to false (non-configurable) so this will prevent changes
        Object.defineProperty(person, 'pincode', {
            get() { return 400500 },
            configurable: false
        });

        //cannot redefine/change the enumerable flag of non-configurable property it won't work, TypeError thrown
        Object.defineProperty(person, 'pincode', {
            enumerable: false  //Uncaught TypeError: Cannot redefine property: pincode
        });

        //cannot make/redefine non-configurable property as configurable property it won't work, TypeError thrown
        Object.defineProperty(person, 'pincode', {
            configurable: true  //Uncaught TypeError: Cannot redefine property: pincode
        });

        //we cannot set the non-configurable property, it won’t work
        Object.defineProperty(person, "pincode", {
            set() { } //Uncaught TypeError: Cannot redefine property: pincode (set was undefined previously)
        });

        //we cannot get the non-configurable property, it won’t work
        Object.defineProperty(person, 'pincode', {
            get() { } //Uncaught TypeError: Cannot redefine property: pincode  (even though the new get does the same thing)
        });

        //we cannot change the non-configurable property value, it won’t work
        Object.defineProperty(person, 'pincode', {
            value: 120 //Uncaught TypeError: Cannot redefine property: pincode  ('value' can be changed when 'configurable' is false but not in this case due to 'get' accessor)
        });

        console.log("person object pincode property new value: ", person.pincode) //400500

        //cannot delete a non-configurable property, it won't work
        delete person.pincode; //Uncaught TypeError: Cannot delete property 'pincode'
        console.log("person Object: ", person.pincode) //400500

        //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

    </script>
</body>
</html>

Output:

JavaScript Configurable Property/ configurable=true

By taking the previous example Person object with few properties and then using Object.defineProperty() method to define a configurable property Pincode on Person object by using property descriptor i.e.: configurable=true.

When configurable is set to true, the property becomes configurable we can change the enumerable flag also we can delete the property of an object. While it allows changing the writable flag from true to false and from false to true. In short, we can modify an object and its value.

Example1: What we discussed above is given in the below example.

JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=true, writable=true, enumerable=true, allow property modification, enumeration, and deletion also it redefine for configurable.

<html>
<head>
    <title>
        JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=true, writable=true, enumerable=true, allow property modification, enumeration, and deletion also it redefine for configurable example1</title>
</head>
<body>
    <script>
        'use strict'
        //Creates a Person Object
        let person = {
            firstName: "Angel",
            lastName: "Kathy",
            age: 25,
            location: "India",
            pincode: 400100
        };

        //to get object full information including property descriptor and flags
        let descriptor = Object.getOwnPropertyDescriptor(person, 'pincode');

        //JSON.stringify is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.
        console.log(JSON.stringify(descriptor, null, 2))

        //method defineProperty() to add property to an object or modifies attributes of an existing property
        //set configurable attribute of pincode property to true (configurable) so this will allow changes
        Object.defineProperty(person, 'pincode', {
            configurable: true
        });

        //can redefine/change the enumerable flag of configurable property it will work
        Object.defineProperty(person, 'pincode', {
            enumerable: true
        });

        //we can change the writable attribute of configurable property from true to false vice versa, it will work
        Object.defineProperty(person, "pincode", {
            writable: true
        });

        // won't be able to change person.pincode or its flags all this won't work when writable=false and can change when writable=true:
        //it makes person.pincode forever sealed
        person.pincode = 400001
        console.log("person object pincode property new value: ", person.pincode)//400001

        //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

        //To print whether property enumerable or not
        console.log('person firstName property enumerable: ', person.propertyIsEnumerable('firstName'));
        console.log('person lastName property enumerable: ', person.propertyIsEnumerable('lastName'));
        console.log('person age property enumerable: ', person.propertyIsEnumerable('age'));
        console.log('person location property enumerable: ', person.propertyIsEnumerable('location'));
        console.log('person pincode property enumerable: ', person.propertyIsEnumerable('pincode'));

        //this will not print the property whose enumerable property set to false.
        console.log("***Enumerable properties***")
        for (let key in person) {
            console.log(key);
        }

        console.log("can delete a configurable property pincode of Person object : ", delete person.pincode);//can delete a configurable property, it will work
        console.log("person object: ", person)
    </script>
</body>
</html>

Output:

Example2: How to Delete or Remove a property using JavaScript Property Descriptors

JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=true, writable=false, enumerable=false, prevent property modification, enumeration, but allow deletion also it redefine for configurable.

<html>
<head>
    <title>
        JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=true, writable=false, enumerable=false, prevent property modification, enumeration but allow deletion also it redefine for configurable example2
    </title>
</head>
<body>
    <script>
        'use strict'
        //Creates a Person Object
        let person = {
            firstName: "Angel",
            lastName: "Kathy",
            age: 25,
            location: "India",
            pincode: 400100
        };

        //to get object full information including property descriptor and flags
        let descriptor = Object.getOwnPropertyDescriptor(person, 'pincode');

        //JSON.stringify is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.
        console.log(JSON.stringify(descriptor, null, 2))

        //method defineProperty() to add property to an object or modifies attributes of an existing property
        //set configurable attribute of pincode property to true (configurable) so this will allow changes
        Object.defineProperty(person, 'pincode', {
            configurable: true
        });

        //can redefine/change the enumerable flag of configurable property it will work. when false property can't enumerate
        Object.defineProperty(person, 'pincode', {
            enumerable: false
        });

        //we can change the writable attribute of configurable property from true to false vice versa, it will work
        //when false cannot modify the property value
        Object.defineProperty(person, "pincode", {
            writable: false
        });

        // won't be able to change person.pincode or its flags all this won't work when writable=false:
        //it makes person.pincode forever sealed
        //person.pincode = 400001 //Uncaught TypeError: Cannot assign to read only property 'pincode' of object
        console.log("person object pincode property new value: ", person.pincode)

        //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

        //To print whether property enumerable or not
        console.log('person firstName property enumerable: ', person.propertyIsEnumerable('firstName'));
        console.log('person lastName property enumerable: ', person.propertyIsEnumerable('lastName'));
        console.log('person age property enumerable: ', person.propertyIsEnumerable('age'));
        console.log('person location property enumerable: ', person.propertyIsEnumerable('location'));
        console.log('person pincode property enumerable: ', person.propertyIsEnumerable('pincode'));

        //this will not print the property whose enumerable property set to false.
        console.log("***Enumerable properties***")
        for (let key in person) {
            console.log(key);
        }

        console.log("can delete a configurable property pincode of Person object : ", delete person.pincode);//can delete a configurable property, it will work
        console.log("person object: ", person)
    </script>
</body>
</html>

Output:

Now we will represent the above non-Configurable example Person object with Pincode property using Get & Set Property descriptor. As we already saw this in the Property Descriptors chapter. Getter is for reading the property value whereas setter is for setting a new or modifying the existing value of a property. The getter and Setter methods are known as accessor descriptor/property accessor in JavaScript.

Exampe3: What we discussed above is given in the below example.

JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=true, writable=true with property accessor allow property modification and deletion also on redefine for configurable

<html>
<head>
    <title>
        JavaScript Objects, property configuration using Object.defineProperty() descriptor configurable=true, writable=true with property accessor allow property modification and deletion also on redefine for configurable example3
    </title>
</head>
<body>
    <script>
        'use strict'
        //Creates a Person Object
        let person = {
            firstName: "Angel",
            lastName: "Kathy",
            age: 25,
            location: "India",
            pincode: 400100
        };

        //to get object full information including property descriptor and flags
        let descriptor = Object.getOwnPropertyDescriptor(person, 'pincode');

        //JSON.stringify is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.
        console.log(JSON.stringify(descriptor, null, 2))

        //method defineProperty() to add property to an object or modifies attributes of an existing property
        //set configurable attribute of pincode property to true (configurable) so this will allow changes
        Object.defineProperty(person, 'pincode', {
            get() { return 400500 },
            configurable: true
        });

        //can redefine/change the enumerable flag of configurable property it will work
        Object.defineProperty(person, 'pincode', {
            enumerable: true
        });

        //we can set the configurable property, it will work
        Object.defineProperty(person, "pincode", {
            set() { }
        });

        //we can get the configurable property, it will work
        Object.defineProperty(person, 'pincode', {
            get() { }
        });

        //we can change the configurable property value, it will work
        Object.defineProperty(person, 'pincode', {
            value: 120
        });
        console.log("person object pincode property new value: ", person.pincode) //120

        //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
        //To print whether property enumerable or not
        console.log('person firstName property enumerable: ', person.propertyIsEnumerable('firstName'));
        console.log('person lastName property enumerable: ', person.propertyIsEnumerable('lastName'));
        console.log('person age property enumerable: ', person.propertyIsEnumerable('age'));
        console.log('person location property enumerable: ', person.propertyIsEnumerable('location'));
        console.log('person pincode property enumerable: ', person.propertyIsEnumerable('pincode'));

        //this will not print the property whose enumerable property set to false.
        console.log("***Enumerable properties***")
        for (let key in person) {
            console.log(key);
        }

        console.log("can delete a configurable property pincode of Person object : ", delete person.pincode);//can delete a configurable property, it will work
        console.log("person object: ", person)

    </script>
</body>
</html>

Output:

In the next article, I am going to discuss JavaScript Inherited Properties with Examples. Here, in this article, I try to explain How to Delete or Remove a property using JavaScript Property Descriptors with Examples and I hope you enjoy this How to Delete or Remove a property using JavaScript Property Descriptors with Examples article.