JavaScript Object Property Flags and Descriptors

— Modifying objects with descriptors and writable, enumerable and configurable flags.

Photo by Philippine FITAMANT on Unsplash

In this blog we are going to look into manipulating Object and its properties in JavaScript, referencing its writable, enumerable and configurable flags.

But first, let’s revisit the concept.

The class represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the constructor (, ) or the object initialiser / literal syntax.

Normally, there are 4 types of property/method to think about:

  • Those defined inside a constructor function that are given to object instances. Like the property below.
  • Those defined directly on the constructor themselves, that are available only on the constructor, known as static properties/methods. Like the above.
  • Those defined on a constructor’s prototype, which are inherited by all instances and inheriting object classes. Any member defined on a Constructor’s property. Like the method above.
  • Those available on an object instance. For example .

All the properties above are defined as “key-value” pairs. But there are some hidden attributes on them that are default if not set but have great power underneath.

Object properties, besides a , have flags.

Enumerable

Enumerable flag defines if the property is enumerable and show up in for…in loops unless the property’s key is a Symbol. If it’s set to then it also won’t be picked by or spread operator.

Writable

When the property attribute is set to , the property is said to be “non-writable”. It cannot be reassigned.

Configurable

The attribute controls at the same time whether the property can be deleted and whether its attributes (other than and ) can be changed.

  • Can’t delete the property
  • Can’t change .
  • Can’t change .
  • Can’t change to (works the other way around).
  • Can’t change (but can assign them if absent).

To define the object property in a formal way (instead of using assignment operator) we can use the below method.

Object.defineProperty(obj, prop, descriptor)

The static method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

You can see the 3rd argument is descriptor. This is where all the 3 flags we mentioned earlier come into play. Property descriptors present in objects come in two types: data descriptors and accessor descriptors. A descriptor must be one of these two, it cannot be both.

  • By default, both types have and .

But there are something specific to the kind.

  • A data descriptor is a property that has a field, defaults to , and a field defaults to that indicates if the property can be reassigned.
  • An accessor descriptor is a property described by a getter-setter pair of functions. is a function which serves as a getter for the property defaults to . is a function which serves as a setter for the property, defaults to .

Note that the flags have different values with different ways of adding properties and default values.

That’s so much of it today!

Next blog we will look at the different methods to manipulate Objects.

Happy Reading!