Javascript Object Property Attributes: configurable, enumerable, value, writable

September 9, 2018  /  2 responses

In JavaScript, an object can have two types of properties: data(standard) properties and accessor properties. Every property in an object has some attributes, this blog post we are going to take a look at the attributes of data properties.

The data properties have the following four attributes:

• [[Configurable]] – Determines whether we can change the property
• [[Enumerable]] – Determines whether we can iterate over the property
• [[Value]] – It holds the value of the property
• [[Writable]] – Determines whether we can change the value to the property

By default [[Enumerable]], [[Configurable]], [[Writable]] are true for any property we create in an object.

var product = {
  price: 100
};

In the above product object, we can loop through, change, write into the property price.

Using Object.getOwnPropertyDescriptor(object, property) method we can get the attributes of a property in an object.

var product = {
  price: 100
};

var descriptor = Object.getOwnPropertyDescriptor(product, 'price');
console.log(descriptor);

// {value: 100, writable: true, enumerable: true, configurable: true}

Usually, an object holds more than one property, using Object.getOwnPropertyDescriptors(object) method we can get the attributes of all the properties in an object.

var product = {
   name: 'Laptop',
   price: 100
};
 
var descriptor = Object.getOwnPropertyDescriptors(product);
console.log(descriptor);

/*
{
  name: {value: "Laptop", writable: true, enumerable: true, configurable: true}
  price: {value: 100, writable: true, enumerable: true, configurable: true}
}
*/

We can modify the attributes of property to change its behavior using Object.defineProperty(object, property, descriptor) method.

var product = {
  name: 'Laptop',
  price: 100
};

var descriptor = Object.getOwnPropertyDescriptor(product, 'price');
console.log(descriptor);

// {value: 100, writable: true, enumerable: true, configurable: true}

for (var prop in product) {
  console.log(prop);
}

/*
  "name"
  "price"
*/

Object.defineProperty(product, 'price', {
  enumerable: false
});

for (var prop in product) {
  console.log(prop);
}

// "name"

After changing the enumerable property to false, we won’t be able to iterate it over anymore.

Instead of directly creating the property price on the product object, let’s use the Object.defineProperty() method and modify all of its attributes.

var product = {};

Object.defineProperty(product, 'price', {
  configurable: false,
  enumerable: false,
  writable: false,
  value: 100
});

As the writable attribute of price property is false, we won’t be able to change the value.

console.log(product.price); // 100
product.price = 200;
console.log(product.price); // 100

As the enumerable attribute of price property is false, we won’t be able to iterate it over anymore.

for (var prop in product) {
  console.log(prop);
}

// no properties are displayed

var properties = Object.keys(product);
console.log(properties.length); // 0

As the configurable attribute of price property is false, we won’t be able to delete it. At the time of setting the configurable attribute of price property to false, we also set the enumerable to false and writable to false, because of that we can neither change them (enumerable, writable) back to true nor configurable itself to true.

console.log(product.price); // 100
delete product.price;
console.log(product.price); // 100

Object.defineProperty(product, 'price', {
  enumerable: true
});

// "TypeError: Cannot redefine property: price`

Nonwritable property throws an error in the strict mode when we try to change the value. Nonconfigurable property throws an error in the strict mode when you try to delete the property. In non-strict mode, the operation silently fails.

The writable attribute has bit interesting behavior. If the writable attribute value is true at the time of setting configurable to false, we can change it once.

var product = {};

Object.defineProperty(product, 'price', {
  configurable: false,
  enumerable: false,
  writable: true,
  value: 100
});

console.log(product.price); // 100
product.price = 200;
console.log(product.price); // 200

Object.defineProperty(product, 'price', {
  writable: false
});

console.log(product.price); // 200
product.price = 300;
console.log(product.price); // 200

Object.defineProperty(product, 'price', {
  writable: true
});

// "TypeError: Cannot redefine property: price

When we use the Object.defineProperty() method to create a property if we don’t specify the configurable, enumerable, writable, unlike the standard way they default to false.

var product = {};

Object.defineProperty(product, 'price', {
  value: 100
});

var descriptor = Object.getOwnPropertyDescriptor(product, 'price');
console.log(descriptor);

// {value: 100, writable: false, enumerable: false, configurable: false}

Using Object.defineProperties() method we can define multiple properties at once.