Read full article on the Infragistics blog
In modern JavaScript, objects are integral, and having a strong understanding of topics surrounding objects is necessary for writing better JavaScript. You can create an object in four ways in JavaScript.
Read about them in greater detail here.
Once you know how to create an object, you may wish to learn about object property descriptors. As a recap, let us say you have an object –cat:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var cat = { | |
| name:'foo', | |
| age: 9 | |
| } |
Each object property contains more information than just a value. For example, you can print other property information using the Object.getOwnPropertyDescriptor method
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log(Object.getOwnPropertyDescriptor(cat,'name')); |
On the console, you can see that a property name offers further information:
As is very clear, if writable is set to true, you can rewrite a property value, etc. You can read more about the JavaScript Object Property Descriptor here.
As of now, you know about object property descriptors, so if you are required to make a property Read-Only, you will set the property writable to false.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Object.defineProperty(cat,'name',{writable:false}); |
Next, let us go through a few more requirements for changing the default behavior of a JavaScript object.
- Prevent an object from having new property
- In addition to requirement 1, mark all properties configurable to false
- In addition to requirement 2, make all properties writable to false
Starting with ECMA 6, you have methods to achieve the above requirements. Let us take them one by one:
Object.preventExtensions
Let us say, you have an object – cat:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var cat = { | |
| name:'foo', | |
| age: 9 | |
| } |
With Default behavior, you can add properties to a JavaScript object. Thus, the below operation is possible:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| cat.color ='black'; | |
| console.log(cat.color); // black |
To prevent the default behavior from adding properties dynamically in an object, you need to use Object.preventExtensions(). This method prevents an object from having new properties added to it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Object.preventExtensions(cat); | |
| cat.color ='black'; | |
| console.log(cat.color); // undefined |
After using Object.preventExtensions on the object, if you add new property color, JavaScript will ignore it, and as an output you will get undefined.
If JavaScript is in strict mode, you will get an error if you add a new property to an object that is not extensible.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict' | |
| var cat = { | |
| name:'foo', | |
| age: 9 | |
| } | |
| Object.preventExtensions(cat); | |
| cat.color ='black'; | |
| console.log(cat.color); // error thrown |
In strict mode, you will get an error with very clear messaging that states, “cannot add property, object is not extensible”
To summarize, you should use the object.preventExtensions method to prevent an object from having new properties added to it.
Dhananjay Kumar 
Leave a Reply