How to prevent modification of object in JavaScript ?.

Javascript Object Oriented Programming Programming

ECMAScript 5 has introduced several methods to prevent modification of object. Those preventive measures ensures that no one, accidentally or otherwise change functionality of object.

There are 3 levels of preventive methods

1) Prevent Extensions

In this level, one cannot add any new properties or methods but can access existing properties or methods. Here there is an ability to delete the respective object. Object.preventExtensions() is the method used to accomplish this task. It prevents any new properties from ever being added to the object.

Example

Live Demo

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.preventExtensions(object1);
   delete object1.prop1 // value got deleted
   try {
      Object.defineProperty(object1, 'prop2', {
      value: 2
   });
   } catch (err) {
   document.write(err);
   }
   document.write("</br>");
   document.write(object1.prop1);
</script>
</body>
</html>

Output

TypeError: Cannot define property prop2, object is not extensible
undefined // deleted so undefined

2) Seal

It is same as preventing extensions, in addition it doesn't allow to delete existing properties or methods. To accomplish this task Object.seal() method is used.

Example

Live Demo

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.seal(object1);
   object1.prop1 = 2;                 // value got changed
   delete object1.prop1;
   try {
      Object.defineProperty(object1, 'prop2', {
      value: 2
   });
   } catch (err) {
      document.write(err);
   }
   document.write("</br>");
   document.write(object1.prop1); // it gives value as 2 because of seal.
</script>
</body>
</html>

Output

TypeError: Cannot define property prop2, object is not extensible
2  // because of seal the value can't be deleated but got updated

3) Freeze

In addition to seal's functionality, freeze doesn't allow even to access the existing properties. To freeze an object we use Object.freeze() method. It can also make an object immutable.

Example

Live Demo

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.freeze(object1);
   object1.prop1 = 2;          //  value got updated
   delete object1.prop1;        // value got deleted
   try {
      Object.defineProperty(object1, 'prop2', {
      value: 2
   });
   } catch (err) {
      document.write(err);
   }
   document.write("</br>");
   document.write(object1.prop1);  // it gives 1 as output despite value updated to 2
</script>
</body>
</html>

Output

TypeError: Cannot define property prop2, object is not extensible
1 // because of freeze the value won't get delete and won't get update.

Vineeth.mariserla

Published on 13-Jun-2019 13:06:37

Previous Page Print Page