Mastering Object.freeze() and Object.seal() in JavaScript: Controlling Object Mutability

Object.freeze and Object.seal in JavaScript

When working with objects in JavaScript, controlling their mutability is essential to prevent unintended changes. Two methods provided by JavaScript for this purpose are Object.freeze() and Object.seal(). Understanding their differences and use cases is key to writing robust code.

---

1. Object.freeze()

The Object.freeze() method makes an object immutable. This means:

• No new properties can be added.
• Existing properties cannot be modified, removed, or reconfigured.
• The object is effectively "frozen" and cannot be changed in any way.

Syntax:

Object.freeze(obj);

Example:

const obj = { name: "Alice", age: 25 };
Object.freeze(obj);

obj.age = 30; // Does nothing (strict mode: throws an error)
obj.gender = "female"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Alice", age: 25 }

Use Case:

• To ensure that an object remains constant throughout your program, such as configuration settings.

Checking if an Object is Frozen:

Use Object.isFrozen() to determine if an object is frozen:

console.log(Object.isFrozen(obj)); // true

---

2. Object.seal()

The Object.seal() method restricts modifications to an object but is less strict than Object.freeze(). It allows:

• Modification of existing properties (values can change).
• Prevention of adding or removing properties.

Syntax:

Object.seal(obj);

Example:

const obj = { name: "Bob", age: 30 };
Object.seal(obj);

obj.age = 35; // Allowed: Existing properties can be modified
obj.gender = "male"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Bob", age: 35 }

Use Case:

• When you want to protect the structure of an object (prevent additions/deletions) but still allow changes to property values.

Checking if an Object is Sealed:

Use Object.isSealed() to determine if an object is sealed:

console.log(Object.isSealed(obj)); // true

---

3. Key Differences Between Object.freeze() and Object.seal()

Feature	Object.freeze()	Object.seal()
Add new properties	Not allowed	Not allowed
Remove existing properties	Not allowed	Not allowed
Modify existing properties	Not allowed	Allowed
Reconfigure property descriptors	Not allowed	Not allowed
Use case	Immutable objects (constants)	Restrict structure but allow value changes

---

4. Frozen and Sealed Nested Objects

Both Object.freeze() and Object.seal() are shallow, meaning they do not affect nested objects. To deeply freeze or seal an object, you need to recursively apply the method to each nested object.

Example (Shallow Effect):

const obj = {
  name: "Eve",
  details: { age: 28 }
};

Object.freeze(obj);
obj.details.age = 30; // Allowed, as `details` is not frozen

console.log(obj); // { name: "Eve", details: { age: 30 } }

Deep Freeze Helper Function:

function deepFreeze(obj) {
  Object.freeze(obj);
  for (const key in obj) {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      deepFreeze(obj[key]);
    }
  }
}

const obj = {
  name: "Eve",
  details: { age: 28 }
};

deepFreeze(obj);
obj.details.age = 30; // Not allowed

console.log(obj); // { name: "Eve", details: { age: 28 } }

---

5. Common Pitfalls and Tips

1. Non-strict Mode Behavior: In non-strict mode, changes to frozen or sealed objects fail silently. Always use strict mode ("use strict";) for clearer debugging.
2. Prevent Confusion with Object Mutability: Clearly document when and why an object is frozen or sealed to avoid misinterpretations in team environments.
3. Seal Before Freezing: If you want both restricted structure and immutability, seal the object first, then freeze it.

---

Conclusion

Both Object.freeze() and Object.seal() are valuable tools for managing object immutability in JavaScript. While Object.freeze() ensures complete immutability, Object.seal() offers flexibility by allowing changes to existing property values. Choosing the right method depends on the level of control you need over your objects.

Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: [e-mail].