CODEWITHSUNDEEP
javascriptobjectecmascript-6attributes
Bravo
Bravo

Reputation: 9027

Difference between Configurable and Writable attributes of an Object

I saw the following regarding javascript, object data property attributes

— 
Configurable: Specifies whether the property can be deleted or changed.

— Enumerable: Specifies whether the property can be returned in a for/in loop.

— Writable: Specifies whether the property can be changed.

Here "Configurable" and "Writable" are representing the same (whether the property can be changed), then why do we need two separate attributes?

Upvotes: 38

Views: 14151

Answers (5)

Daniel Kaplan
Daniel Kaplan

Reputation: 67360

On MDN, I think the Object.defineProperty() documentation answers this question. It's dense reading, but the examples are accessible:

writable attribute:

const o = {}; // Creates a new object

Object.defineProperty(o, "a", {
  value: 37,
  writable: false,
});

console.log(o.a); // 37
o.a = 25; // No error thrown
// (it would throw in strict mode,
// even if the value had been the same)
console.log(o.a); // 37; the assignment didn't work

// strict mode
(() => {
  "use strict";
  const o = {};
  Object.defineProperty(o, "b", {
    value: 2,
    writable: false,
  });
  o.b = 3; // throws TypeError: "b" is read-only
  return o.b; // returns 2 without the line above
})();

configurable attribute:

const o = {};
Object.defineProperty(o, "a", {
  get() {
    return 1;
  },
  configurable: false,
});

Object.defineProperty(o, "a", {
  configurable: true,
}); // throws a TypeError
Object.defineProperty(o, "a", {
  enumerable: true,
}); // throws a TypeError
Object.defineProperty(o, "a", {
  set() {},
}); // throws a TypeError (set was undefined previously)
Object.defineProperty(o, "a", {
  get() {
    return 1;
  },
}); // throws a TypeError
// (even though the new get does exactly the same thing)
Object.defineProperty(o, "a", {
  value: 12,
}); // throws a TypeError
// ('value' can be changed when 'configurable' is false, but only when the property is a writable data property)

console.log(o.a); // 1
delete o.a; // Nothing happens; throws an error in strict mode
console.log(o.a); // 1

Upvotes: 0

themefield
themefield

Reputation: 4255

configurable and writable are NOT representing the same thing.

configurable means property descriptor and existence.

writable means property value only.

A property's descriptor contains value, enumerable, configurable and writable.

scenario 1: create property by assignment

'use strict';  // non-strict mode behaves slightly different

var foo = {};
foo.bar = 1;  // operated by CreateDataProperty*

// the above is the same as
Object.defineProperty(foo, 'bar', {
  value: 1,
  configurable: true,
  writable: true,
  // ...
});
  • CreateDataProperty is an operation defined together with ECMAScript spec.

scenario 2: create property by descriptor

'use strict';  // non-strict mode behaves slightly different

var foo = {};
Object.defineProperty(foo, 'bar', {
  value: 1,
  // configurable => false
  // writable => false
});

foo.bar = 2;    // throw TypeError: Cannot assign to read only property

Object.defineProperty(foo, 'bar', {
  value: 2
  // ...
}); // throw TypeError: Cannot redefine property

delete foo.bar; // throw TypeError: Cannot delete property

Upvotes: 26

Julius Arop
Julius Arop

Reputation: 11

If Writable is set to true means the object property's value can be changed.

If Configurable is set to true, means the object property's type can be changed from data property to accessor property (or vice versa); and the object property can be deleted.

Upvotes: 1

N.J.Chen
N.J.Chen

Reputation: 41

Configurable prevents any attempts to 'redefine' properties of a key with Object.defineProperty, chrome will throw an error sign

Uncaught TypeError: Cannot redefine property: foo

The writable attribute simply avoids this value from being edited

Upvotes: 3

ColdCold
ColdCold

Reputation: 4337

From: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

Writable: If false, the value of the property can not be changed.

Configurable: If false, any attempts to delete the property or change its attributes (Writable, Configurable, or Enumerable) will fail.

Enumerable: If true, the property will be iterated over when a user does for (var prop in obj){} (or similar).

Upvotes: 36

Related Questions