Learn how to restrict adding, removing and changing or simply the modification of object properties in javascript.
Objects are the backbone of the javascript programming language as most of its features are actually object, like arrays, functions, etc.
So to make objects so powerful it was obvious that it should be able to modify or extend so that we can use it in different forms.
But there are scenarios where we want to restrict this modification to some limit or completely.
Here we will see two different objects methods that can you used to achieve the same.
Using Object.seal() to restrict object change.
First, we will see a scenario where we want to restrict an object to become extendible.
For example, we should be able to modify the existing properties or methods of the objects but cannot add a new one. Object.seal()
can be used to achieve the same but it also marks all existing properties as non-configurable like we cannot delete them but just update their value if it is writable.
const obj = { prop: 42 }; Object.seal(obj); obj.prop = 33; console.log(obj.prop); // 33 delete obj.prop; // cannot delete when sealed console.log(obj.prop); // 33
But we cannot restrict the modification of nested objects with Object.seal()
.
const obj = { prop: 42, nested: { a: 1, b: 2 } }; //Seal the object Object.seal(obj); obj.nested.a = 2; delete obj.nested.a; console.log(obj.nested.a); // undefined
However, we can create another helper function which will deep seal or seal the nested objects as well.
function deepSeal(object) { // Retrieve the property names defined on object let propNames = Object.getOwnPropertyNames(object); // Seal properties before Sealing self for (let name of propNames) { let value = object[name]; object[name] = value && typeof value === "object" ? deepSeal(value) : value; } return Object.seal(object); }
Now this will seal the nested objects as well.
const obj = { prop: 42, nested: { a: 1, b: 2 } }; //Seal the object deepSeal(obj); obj.nested.a = 2; delete obj.nested.a; console.log(obj.nested.a); // 2
You can use Object.isSealed()
to check if an object is sealed or not.
const obj = { prop: 42, nested: { a: 1, b: 2 } }; //Seal the object deepSeal(obj); console.log(Object.isSealed(obj)); //true
Using Object.freeze() to restrict modification of object properties.
Unlike Object.seal()
, Object.freeze()
freezes the object completely. It does not even allow changing of object properties.
const obj = { prop: 42 }; Object.freeze(obj); obj.prop = 33; // Throws an error in strict mode console.log(obj.prop); // 42
But this also only shallow freezes the object properties.
const obj = { prop: 42, nested: { a: 1, b: 2 } }; Object.freeze(obj); obj.nested.a = 33; // Updates the value console.log(obj.nested.a); // 33
Like deepSeal()
we can also create a deepFreeze()
function that will freeze the nested objects as well.
function deepFreeze(object) { // Retrieve the property names defined on object var propNames = Object.getOwnPropertyNames(object); // Freeze properties before freezing self for (let name of propNames) { let value = object[name]; object[name] = value && typeof value === "object" ? deepFreeze(value) : value; } return Object.freeze(object); }
const obj = { prop: 42, nested: { a: 1, b: 2 } }; deepFreeze(obj); obj.nested.a = 33; // Updates the value console.log(obj.nested.a); // 1
You can use Object.isFrozen()
to check if an object is frozen or not.
const obj = { prop: 42, nested: { a: 1, b: 2 } }; //Seal the object deepFreeze(obj); console.log(Object.isFrozen(obj)); //true