Understanding Object.freeze() and Object.seal()

Previously, we wrote about How to Create Immutable Objects in JavaScript. In this howto, we'll explore the difference between Object.freeze() and Object.seal().

Both Object.freeze() and Object.seal() are methods used to control how objects behave when modified, but they have distinct differences. Here's how each works:

Object.freeze()

The Object.freeze() method "freezes" an object, preventing any changes to its properties. This means:

• No new properties can be added to the object.
• Existing properties cannot be removed.
• Modifications to existing properties (like changing values) are not allowed.
• Reconfiguring property descriptors (like changing from writable to non-writable) is not allowed.
• The object becomes immutable, but note that for nested objects, only the outer object is frozen, not the deeper properties.

Example:

Key Points:

• It makes the object completely immutable.
• No changes to the object's structure or values are allowed.

As you can see, all attempts to modify the object failed. On a low level, Object.freeze() adds a non-configurable flag to all the object’s properties, preventing them from being altered.

However, if there are nested objects, Object.freeze() does not automatically freeze them. This means that the properties of nested objects can still be modified:

To freeze nested objects, you’ll need to do it manually or write a recursive function. DeepFreeze a nested Object/Array

Object.seal()

The Object.seal() method "seals" an object, restricting certain modifications but still allowing others:

• No new properties can be added.
• Existing properties cannot be removed.
• Modifying existing properties (like changing their values) is allowed.
• Property descriptors (like configurable) are set to false, meaning properties can't be redefined or removed.
• The object’s structure is sealed, but values can still be updated.

Example:

Key Points:

• Sealed objects can have their existing properties modified.
• New properties cannot be added, and existing properties cannot be deleted.

Usage Examples

Protecting Configuration Objects

Configuration objects define the behavior of your application. They need to remain stable and unchangeable to avoid accidental errors:

By using Object.freeze(), we ensure that any attempts to modify config will be ignored.

Usage in Redux Library

In Redux, immutability of the state is key to predictability and easier debugging. By using Object.freeze(), you can protect the state from unwanted mutations.

Example:

Here, we use Object.freeze() to ensure that each time the state is updated, it remains unchanged.

Example with React

In React, managing component state is often necessary. Protecting state using Object.freeze() can help prevent errors caused by data mutations.

Example:

In this example, we use Object.freeze() to protect the configuration state.

Protecting Constants and Global Variables

When working with constants, you may need to ensure that these values are not accidentally modified. With Object.freeze(), you can make constants truly immutable.

Example:

In this example, even if someone tries to change MAX_CONNECTIONS, the modification will not occur, and your application will remain stable.

Summary of Differences

• Object.freeze() makes an object completely immutable, preventing any changes, including modifications to values.
• Object.seal() allows modifying existing properties but prevents adding or removing properties.

These methods are useful for locking down objects to prevent accidental or unwanted changes.