JAVA SCRIPT - Extending an Object by Defining a New Property

Extending an Object by Defining a New Property

Problem

You can easily slap a new property onto an object, but you want to do so in such a way that you have more control of how it’s used.

Solution

Use the defineProperty() method to add the property. 

Given the following object:

var data = {}

If you want to add the following two properties with the given characteristics: • type: Initial value set and can’t be changed, can’t be deleted or modified, but can be enumerated • id: Initial value set, but can be changed, can’t be deleted or modified, and can’t be enumerated Use the following JavaScript:

var data = {};
Object.defineProperty(data, 'type', {
 value: 'primary',
 enumerable: true
});
console.log(data.type); // primary
data.type = 'secondary';
console.log(data.type); // nope, still primary
Object.defineProperty(data, 'id', {
 value: 1,
 writable: true
});
console.log(data.id); // 1
data.id=300;
console.log(data.id); // 300
for (prop in data) {
 console.log(prop); // only type displays
}

EXPLAIN 

The defineProperty() is a way of adding a property to an object other than direct assignment that gives us some control over its behavior and state. There are two varia‐ tions of property you can create with defineProperty(): a data descriptor, as demon‐ strated in the solution, and an accessor descriptor, defined with a getter-setter function pair. An example of an accessor descriptor is the following:

var data = {};
var group = 'history';
Object.defineProperty(data, "category", {
 get: function () { return group; },
 set: function (value) { group = value; },
 enumerable: true,
 configurable: true
});
console.log(data.category); // history
group = 'math';
console.log(data.category); // math
data.category = 'spanish';
console.log(data.category); // spanish
console.log(group); // spanish

Changes to the value for data.category and group are now interconnected. 
The Object.defineProperty() supports three parameters: the object, the property, and a descriptor object. The latter consists of the following options: 

• configurable: false by default; controls whether the property descriptor can be changed 
• enumerable: false by default; controls whether the property can be enumerated 
• writable: false by default; controls whether the property value can be changed through assignment 
• value: The initial value for the property 
• get: undefined by default; property getter
• set: undefined by default; property setter The defineProperty() method has wide support in all modern browsers, but with caveats. Safari does not allow its use on a DOM object, while IE8 only supports it on a DOM object (IE9 and later support it on all objects).