/

Understanding JavaScript Property Descriptors

Understanding JavaScript Property Descriptors

In JavaScript, every object has a set of properties, and each property has its own descriptor. These descriptors define the behavior and characteristics of the property. Understanding property descriptors is essential for working with objects in JavaScript.

There are several Object static methods that interact with property descriptors. These methods include:

  • Object.create()
  • Object.defineProperties()
  • Object.defineProperty()
  • Object.getOwnPropertyDescriptor()
  • Object.getOwnPropertyDescriptors()

Let’s take a closer look at property descriptors using an example:

1
2
3
{
  value: 'Something'
}

This is the simplest form of a property descriptor. In this example, value represents the property value in a key-value definition. When you define this property in an object, the key is used to identify the property:

1
2
3
4
5
{
  breed: {
    value: 'Siberian Husky'
  }
}

Here’s a complete example that demonstrates the use of property descriptors:

1
2
3
4
5
6
7
const animal = {};
const dog = Object.create(animal, {
  breed: {
    value: 'Siberian Husky'
  }
});
console.log(dog.breed); //'Siberian Husky'

You can add additional properties to define different aspects of the property:

  • value: Represents the value of the property.
  • writable: If set to true, the property’s value can be changed.
  • configurable: If set to false, the property cannot be removed or have any attributes changed, except its value.
  • enumerable: If set to true, the property can be enumerated.
  • get: A getter function that is called when the property is read.
  • set: A setter function that is called when the property is set to a new value.

The writable, configurable, and enumerable properties define the behavior of the property. By default, all three properties are set to false.

Here’s an example that demonstrates the use of these additional properties:

1
2
3
4
5
6
7
8
9
const animal = {};
const dog = Object.create(animal, {
  breed: {
    value: 'Siberian Husky',
    writable: false
  }
});
console.log(dog.breed); //'Siberian Husky'
dog.breed = 'Pug'; //TypeError: Cannot assign to read only property 'breed' of object '#<Object>'

Understanding property descriptors allows you to have more control over object properties and their behavior. Take advantage of property descriptors to manipulate object properties effectively.

tags: [“JavaScript”, “property descriptors”, “objects”, “writable”, “configurable”, “enumerable”]