Objects — Writable, Configurable & Enumerable

Few days ago, I was playing with JS object. They looks so simple but very very powerful entity. So object has a config which contains four property as value, writable, enumerable and configurable.

Object Creation

// Each of the following options will create a new empty object:
var newObject = {};
// or
var newObject = Object.create( Object.prototype );
// or
var newObject = new Object();

Set Property

var newObject = {a: 1};
// Accessing to a property
newObject.a; // => 1
// Modifying the value of a property
newObject.a = 0;
newObject.a; // => 0;
// Creating a new property
newObject.b = 2;
newObject.b; // => 2
// Deleting a property
delete newObject.b;
newObject.b; // => undefined

but, you know that all the properties above are writable, configurable & enumerable, I mean :

• writable: I can modify their values, I can update a property just assigning a new value to it.Defaults to true.
• enumerable: I can access to all of them using a for..in loop. Also, enumerable property keys of an object are returned using Object.keys method. Defaults to true.
• configurable: I can modify the behavior of the property, so I can make them non-enumerable, non-writable or even non-cofigurable if I feel like doing so. Configurable properties are the only ones that can be removed using the delete operator. Defaults to true.

So Let’s take a quick look that how to use above config and how it works:

// Set properties
Object.defineProperty( newObject, 'a', {
   value: "some value",
   writable: true,
   enumerable: true,
   configurable: true
});

Object’s enumerable property

• Enumerable

Object.defineProperty( newObject, 'a', {
   value: "some value",
   enumerable: true,
});
// Object {a: "some value"}
for (var key in newObject) { console.log(key) }
// a

Object.keys(newObject);
// ["a"]

• Non-Enumerable

Object.defineProperty( newObject, 'a', {
   value: "some value",
   enumerable: false,
});
// Object {a: "some value"}
for (var key in newObject) { console.log(key) }
// undefined
Object.keys(newObject);
// []

Object’s writable property

• writable

Object.defineProperty( newObject, 'a', {
   value: "some value",
   writable: true,
});
// Object {a: "some value"}
newObj.a = 'some other new value';
// "some other new value"
newObj
// Object {a: "some other new value"}

• Non-writable

Object.defineProperty( newObject, 'a', {
   value: "some value",
   writable: false,
});
// Object {a: "some value"}
newObj.a = 'some other new value';
// "some other new value"
newObject
// Object {a: "some value"}

Object’s configurable property

• configurable

Object.defineProperty( newObject, 'a', {
   value: "some value",
   configurable: true,
});
// Object {a: "some value"}
delete newObject.a;
// true
newObject
// Object {}

• Non-configurable

Object.defineProperty( newObject, 'a', {
   value: "some value",
   configurable: false,
});
// Object {a: "some value"}
delete newObject.a;
// false
newObject
// Object {a: "some value"}

Reference : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty