How to Show or Hide a Property using Property Descriptors in JavaScript

How to Show or Hide a Property using Property Descriptors in JavaScript

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

Show or hide a property during enumeration using Property Descriptors in JavaScript

When the property already exists in an object, the Object.defineProperty() method shows or hides the existing property value during loops or iteration on an object using Property descriptor.

Enumerable Attribute in JavaScript

The enumerable property of the property descriptor tells whether that property will be enumerated while looping through the object’s properties or not.

By default, it is false. The attribute is considered as “non-enumerable”. The property cannot be counted and not listed through a loop. When set to true that means this property can be counted and show up when iterating using a loop (for… in) is called enumerable. To check whether a property is enumerable or not, for that we use the function called propertyIsEnumerable(). It returns true if a property is enumerable otherwise false.

This attribute defines whether the properties will get shown up/listed by using for… in loop and Object.keys() or not.

  1. enumerable = false
  2. enumerable = true
enumerable = false /Non-enumerable Property

We are taking a reference of the previous example Person object with few properties and then using Object.defineProperty() method to define a new property Pincode on Person object along with property descriptor i.e.: enumerable. By default, it is false. When it is set to false, the property cannot be counted, and it is not visible when enumerated using for… in loop and Object.keys(). What we discussed above is given in the below example.

Example: JavaScript Objects, update property using Object.defineProperty() descriptor enumerable=false
<html>
<head>
    <title>JavaScript Objects, update property using Object.defineProperty() descriptor enumerable=false</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 enumerable attribute of pincode property to false so this won’t show
        Object.defineProperty(person, 'pincode', {
            value: 400100,
            enumerable: false,
        });

        //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);
        }

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

How to Show or Hide a property using Property Descriptors in JavaScript with Examples

enumerable = true /Enumerable Property

We are taking a reference of the previous example Person object with few properties and then using Object.defineProperty() method to define a new property Pincode on Person object along with property descriptor i.e.: enumerable. When it is set to true, the property can be counted, and it is listed/ visible when enumerated using for… in loop and Object.keys(). What we discussed above is given in the below example.

Example: JavaScript Objects, update property using Object.defineProperty() descriptor enumerable=true
<html>
<head>
    <title>JavaScript Objects, update property using Object.defineProperty() descriptor enumerable=true</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 enumerable attribute of pincode property to true so this will print
        Object.defineProperty(person, 'pincode', {
            value: 400100,
            enumerable: 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

        //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);
        }

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

How to Show or Hide a property using Property Descriptors in JavaScript

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

Leave a Reply

Your email address will not be published.