JavaScript Property Descriptors

Every JavaScript object property has a property descriptor.

The descriptor tells JavaScript what the property contains and how it behaves.

Use Object.getOwnPropertyDescriptor() to inspect one:

const dog = {
  breed: 'Siberian Husky'
}

const descriptor = Object.getOwnPropertyDescriptor(dog, 'breed')
console.log(descriptor)

The result is:

{
  value: 'Siberian Husky',
  writable: true,
  enumerable: true,
  configurable: true
}

These properties mean:

• value is the value stored in the property
• writable controls whether you can assign a new value
• enumerable controls whether methods such as Object.keys() include it
• configurable controls whether you can delete the property or change most of its descriptor

Define a property descriptor

Use Object.defineProperty() to create a property with the behavior you want:

const dog = {}

Object.defineProperty(dog, 'breed', {
  value: 'Siberian Husky',
  writable: false,
  enumerable: true,
  configurable: false
})

Unlike properties created with an object literal, descriptor options omitted from Object.defineProperty() default to false.

In the example, assigning a different value to dog.breed throws in strict mode. In non-strict code, JavaScript ignores the assignment.

Getter and setter descriptors

A descriptor can define a getter and setter instead of storing a value directly:

const user = {
  firstName: 'Flavio',
  lastName: 'Copes'
}

Object.defineProperty(user, 'fullName', {
  enumerable: true,
  get() {
    return `${this.firstName} ${this.lastName}`
  }
})

console.log(user.fullName)

A data descriptor uses value and writable. An accessor descriptor uses get and set. You cannot mix those two groups in the same descriptor.

Want me to talk about your product? You can sponsor this site.