How to prevent Object properties from being modified in JavaScript

One of the most useful additions to the JavaScript specification a few years ago was the const keyword and identifier. It allowed for variable declarations to remain unchanged and unmodifiable, which helped to resolve certain hard to find bug scenarios where data is accidentally mutated in some arbitrary point in the codebase.

And this applied to Objects as well.

const obj = {a: 1, b: 2};

In this particular case, you would not be able to reassign this object to another object, for example, the following would throw an error.

obj = {b:1, c:2};

However, you were more than free to update the values inside of this object. later on in your codebase.

obj.a = 10;
obj.b = 5;

And you could even add and remove new properties as needed at any point in time.

Meaning that technically, you can still mutate this object to something completely different regardless of it being declared as a constant.

Why it's a problem

When working with teams of multiple people of any length, you will often times run into some overlap with logic. Meaning that something that person A wrote needs to be incorporated by person B. And there are alot of assumptions that need to be made often times when working with somebody else's code.

This is why it is relatively important to have rules in place to prevent undesired modifications to various coding elements.

And this is where the Object.preventExtensions() , Object.seal() and Object.freeze() methods come into play, because they will cause the browser to throw an actual error if you try to change any property of a specific object in a certain way.

Let's start with the Object.preventExtensions() method, which prevents the addition of any property to an already existing object.

const obj = {a: 1};

Object.preventExtensions(obj);


obj.c = 10; // will throw an error

Because you have to add this specificity rule to the actual object itself, you can both have objects that are mutable and others that are not working along side each other.

Having objects that are unmodifiable however, could potentially increase errors, if you're unaware of which objects are modifiable and which aren't. And that is why you also have access to the Object.isExtensible() method as well.

This method can be used to check if an object is able to have properties added or not.

const obj = {a: 1, b:2 };

Object.preventExtensions(obj);

let ismutable = Object.isExtensible(obj);



if (ismutable)
   obj.c = 10;

You might also want to ensure that properties in your objects can not be removed for whatever reason.

This is where the Object.seal() method comes into play as it prevents the future addition and removal of properties once the object has been set as such.

const obj = {a: 1};

Object.seal(obj);

delete obj.a; // throws an error

And in similar fashion to Object.isExtensible, you can also use the Object.isSealed() method to check whether an object can be modified or not.

const obj = {a: 1};

Object.seal(obj);

let sealed = Object.isSealed(obj);

And last on the list of Object protection methods, you have the Object.freeze() method which essentially prevents any kind of changes to an object and effectively makes it read-only once it has been set as such.

const obj = {a: 1};

Object.freeze(obj);

obj.b = 2; // throws an error
obj.a = 2; // throws an error
delete obj.a; // throws an error

You effectively have the options to configure an object however you wish in terms of modifiability with these 3 methods.

And while it may seem like overkill to have to configure every object with its proper permissions, on a large enough codebase where you have multiple developers or teams, it begins to make sense.