Property Descriptors for Objects in JavaScript

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 called cat:

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

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.

Object.defineProperty(cat, 'name', { writable: false });

Next, let's go through a few more requirements for changing the default behavior of a JavaScript object.

1. Prevent an object from having a new property.
2. In addition to requirement 1, mark all properties configurable to false.
3. In addition to requirement 2, make all properties writable to false.

Starting with ECMA 6, you have methods to achieve the above requirements. Let's look at them one by one:

Object.preventExtensions

Let's say you have an object called cat:

var cat = {
    name: 'foo',
    age: 9
}

With Default behavior, you can add properties to a JavaScript object. Thus, the below operation is possible:

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.

Object.preventExtensions(cat);
cat.color = 'black';
console.log(cat.color); // undefined

After using Object.preventExtensions on the object, if you add a 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.

'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.

Object.seal

Let's say you want to seal an object, meaning:

• You should be unable to add new properties (calling object.preventExtensions()).
• No configuration should be changed (setting configurable properties to false).

You can seal an object by using the object.seal() method. Let's again consider the cat object:

var cat = {
    name: 'foo',
    age: 9
}

You don’t want new properties added to cat and the configurable of all properties should be set to false. You can do this using the object.seal() method:

Object.seal(cat);
cat.color = 'black';
console.log(cat.color); // undefined
console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

Since you have a sealed object, as an output, you will get undefined and configurable set to false.

To summarize, you should use Object.seal() to seal an object. You will be unable to add new properties and configurable is set to false.

Object.freeze

Let us say you want to freeze an object, meaning:

• You should be unable to add new properties, meaning calling object.preventExtensions().
• No configuration should be changed (setting configurable of properties to false).
• For all properties, writable should be set to false.

You can freeze an object by using the Object.freeze() method. It essentially calls the Object.seal() method and sets the writable property to false.

Let's again consider the cat object:

var cat = {
    name: 'foo',
    age: 9
}

New properties should not be added to to the object, configurable of all properties should be set to false, and writable of properties should be set to false. You can do this using the object.freeze() method:

Object.freeze(cat);
cat.age = 10;
cat.color = 'black';
console.log(cat.age); //9
console.log(cat.color); // undefined
console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

Since you have frozen the object, as an output, you will get undefined, 9, configurable, and writable set to false.

To summarize, you should use Object.freeze() to freeze an object. Once you freeze an object, you should not able to add new properties or rewrite the value of a property, and configurable will be set to false.

Summary

While working with objects in JavaScript, you need a strong understanding of the different ways to create an object. Property descriptors, Object.seal, Object.preventExtensions, and Object.freeze are very much required. I hope you now have a better grasp of these concepts.