Back to: JavaScript Tutorial For Beginners and Professionals
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.
- enumerable = false
- 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:
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:
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.
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.