JavaScript Object Property Flags

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Object Property flags with Examples

In this article, I am going to discuss JavaScript Object Property flags and descriptors /Object properties configuration with Examples. Please read our previous article where we discussed Object Property Initializer Shorthand in JavaScript.

JavaScript Object Property flags

So far, we have learned an object is a complex data type in JavaScript that is used to store any combination of data in a simple key-value pair. Each key-value pair is called a property. In Addition, JavaScript provides us with a list of property descriptors that help us to shape how the property behaves.

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

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

When we create an object, we can’t see them as these property flags are not visible. When we create a property, all of 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.getOwnPropertyDescriptor() method is used as it gives full information about the property.

Object.getOwnPropertyDescriptor() method

Object.getOwnPropertyDescriptor() method provides full information about the property, describing the configuration of a property on a given object, the object return is writable/mutable and is enumerable. This method returns a value called “property descriptor. It contains the value and all the property flags.

Syntax: Object.getOwnPropertyDescriptor(obj, propertyName);

Parameters:
  1. Obj – the object name to get information from.
  2. propName – The name of the property.

Note: 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.getOwnPropertyDescriptor() 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 property descriptor full information about property firstName of person object for that we are using Object.getOwnPropertyDescriptor() method and passing object name person with property name firstName as parameters.

Later we are printing it using JSON.stringify() method as is used to print the JavaScript object returned by Object.getOwnPropertyDescriptor function.

What we discussed above is given in the below example.

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

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

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

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

JavaScript Object Property flags with Examples

We saw from the above example all the property flags are true by default. we can change them anytime. To change the flag, we use Object.defineProperty() method. This we will see in the next chapter.

In the next article, I am going to discuss JavaScript Object Property Descriptors with Examples. Here, in this article, I try to explain JavaScript Object Property flags and descriptors /Object properties configuration with Examples and I hope you enjoy the JavaScript Object Property flags article.

Leave a Reply

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