Make the object immutable in JS - Object.seal() vs Object.freeze() vs Object.preventExtensions()

js-protect-objects.md

Object.seal vs Object.freeze vs Object.preventExtensions()

Object.seal()

/**
 * The Object.seal() method seals an object: that is, prevents new properties to be getting added and making all existing properties
 * non-configurable.
 *
 * @Reference:
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal
 */

const language = {
  name: 'JavaScript',
  author: 'Brendan Eich'
};

Object.seal(language)
// adding property
language['createdAt'] = "Netscape"; // not allowed
// deleting property
delete language.name; // not allowed
// changing property
language.name = "Java"; // allowed

console.log(language); //{"name":"Java","author":"Brendan Eich"}

Object.preventExtensions()

/**
*  Object.preventExtensions() prevents new properties being getting added. We can modify or delete the properties.
*
* @Reference:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensionsl
*
*/

const language = {
name: 'JavaScript',
author: 'Brendan Eich'
};

Object.preventExtensions(language);

// adding property
language['createdAt'] = "Netscape"; // not allowed
// deleting property
delete language.author; // allowed
// changing property
language.name = "Java"; // allowed

console.log(language); //{"name":"Java"}

Object.freeze()

/**
*  Object.freeze() freezes the object, that means it prevents new properties from being added, prevents existing properties getting removed, or existing properties to get changed ot their enumerability, configurability or writability getting changed.
*
* it freezes SHALLOW, nested objects is not frozen here
*
* @Reference:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
*
*/

Object.freeze(language);

// adding property
language['createdAt'] = "Netscape"; // not allowed
// deleting property
delete language.author; // not allowed
// changing property
language.name = "Java"; //not allowed

console.log(language); //{"name":"JavaScript","author":"Brendan Eich"}

Comparison

Operations	Object.seal	Object.preventExtensions	Object.freeze
Adding	❌	❌	❌
deleting	❌	✅	❌
modifying	✅	✅	❌