JavaScript Object getOwnPropertyDescriptors

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Object getOwnPropertyDescriptors with Examples

In this article, I am going to discuss JavaScript Object getOwnPropertyDescriptors with Examples. Please read our previous article where we discussed JavaScript Inherited Properties with Examples

JavaScript Object.getOwnPropertyDescriptors() Method

We already have seen Object.getOwnPropertyDescriptor() method in Property Flag chapter, we will be going to learn about Object.getOwnPropertyDescriptors() method which is same as like Object.getOwnPropertyDescriptor() method with little difference.

The Object.getOwnPropertyDescriptors() method is a JavaScript standard built-in object method it provides full information about all properties of a given object, it returns objects containing writable /mutable and enumerable property flags with a value. These return values are called “property descriptors”. It contains the value and all the property flags.

In other words, the Object.getOwnPropertyDescriptors() method returns all property descriptors of a given object at once.

1. Syntax: Object.getOwnPropertyDescriptors(obj);
2. Parameters: Obj – the object name from which to get all own property descriptors information.
3. Return Value: It returns an object containing all property descriptors of a given object. This method may return an empty object if a given object does not have any properties.

In Addition, JavaScript provides us with a list of property descriptors that help us to shape how the property behaves. The Property Descriptor with some of the following attributes:

Property flags

Object properties contain three special attributes so-called “flags” except value.

1. writable: By default, it is true. When the true value of the property can be changed. Otherwise, it is read-only When set to false. (Data Descriptors)
2. enumerable: By default, it is true. When true the property can be counted and show up when iterating using a loop (for… in), otherwise not when set to false.
3. configurable: By default, it is true. When true the property descriptor can be modified later and the property can be deleted from the respective object, otherwise not when set to false.

Property Accessor/ Accessor Descriptor

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.

These property flags defined how the property behaves. Inside every property of an object, these properties flags are present when we create an object using object literal or vice versa. Let’s create objects using object literal.

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

console.log(person);

//output
//{
// “firstName”: “Angel”,
// “lastName”: “Kathy”,
// “age”: 25,
// “location”: “India”
//}

When we create an object, we can’t see them as these property flags are not visible. When we create a property, all these property flags are true by default. But we can change them anytime. Now we will see how we can get those flags. For this Object.getOwnPropertyDescriptors() method is used as it gives full information about all the properties of the object.

Note that: When we create a property using object literal or any other way. We can see the property name having a value in addition to that property descriptors. All the property flags are true by default, these flags are viewable by using the Object.getOwnPropertyDescriptors() method which contains writable, enumerable, and configurable attributes and all these are set to true by default.

We will evaluate this with an example, for that we have created an object person using object literal which contains few properties. then to get the property descriptor full information about all the properties of a person object for that we are using the Object.getOwnPropertyDescriptors() method and passing the object name person as a parameter.

Later we are printing it using JSON.stringify() method as is used to print the JavaScript object returned by Object.getOwnPropertyDescriptors() function into JSON format string. What we discussed above is given in the below example.

Example1: JavaScript Objects, Object all property info using Object.getOwnPropertyDescriptors() property descriptor

<html>
<head>
    <title>JavaScript Objects, Object all property info using Object.getOwnPropertyDescriptors() property descriptor example1</title>
</head>
<body>
    <script>
        //Creates a Person Object
        let person = {
            firstName: "Angel",
            lastName: "Kathy"
        };

        //to get object full information including all the properties descriptor & flags
        let descriptor = Object.getOwnPropertyDescriptors(person);

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

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

Output:

We saw from the above example for an object person all the property descriptors are returns and its flags are true by default. What we discussed above is given in the below example.

Example2: JavaScript Objects, Object all property info using Object.getOwnPropertyDescriptors() property descriptor

<html>
<head>
    <title>JavaScript Objects, Object all property info using Object.getOwnPropertyDescriptors() property descriptor example2</title>
</head>
<body>
    <script>
        //Creates a person1 Object
        let person1 = {
            firstName: "Angel",
            lastName: "Kathy"
        };

        let descriptor1 = Object.getOwnPropertyDescriptors(person1);
        console.log("descriptor1: ", JSON.stringify(descriptor1, null, 2))
        console.log("descriptor1: ", descriptor1.lastName);
        console.log("descriptor1: ", descriptor1.lastName.value);
        console.log("descriptor1: ", descriptor1.lastName.writable);
        console.log("descriptor1: ", descriptor1.lastName.enumerable);
        console.log("descriptor1: ", descriptor1.lastName.configurable);

        //Creates a person2 Object
        let person2 = {
            firstName: "John"
        };

        let descriptor2 = Object.getOwnPropertyDescriptors(person2);
        console.log("descriptor2: ", JSON.stringify(descriptor2, null, 2))
        console.log("descriptor2: ", descriptor2.firstName);
        console.log("descriptor2: ", descriptor2.firstName.value);
        console.log("descriptor2: ", descriptor2.firstName.writable);
        console.log("descriptor2: ", descriptor2.firstName.enumerable);
        console.log("descriptor2: ", descriptor2.firstName.configurable);

        //create an empty person3 Object
        let person3 = {
        };

        let descriptor3 = Object.getOwnPropertyDescriptors(person3); //This method return an empty object as a given object person3 does not have any properties.
        console.log("descriptor3: ", JSON.stringify(descriptor3, null, 2)) //{}
    </script>
</body>
</html>

Output:

In the above example, we have created three objects person1, person2, and person3. Person1 contains two properties with Object.getOwnPropertyDescriptors() method returns information about all the property descriptors of Object person1, we can retrieve the property descriptor details one by one separately also and same we did for the object person2. For object person3 it’s an empty object hence the Object.getOwnPropertyDescriptors() method returns an empty object {} as a given object person3 does not have any properties.

we can change property descriptors anytime. To change the flag, we use Object.defineProperty() method which we already saw in the Property Flag chapter. We will discuss about Object.defineProperties() method in the next chapter.

In the next article, I am going to discuss JavaScript Object DefineProperties Method with Examples. Here, in this article, I try to explain JavaScript Object getOwnPropertyDescriptors with Examples and I hope you enjoy this JavaScript Object getOwnPropertyDescriptors with Examples article.