JavaScript Object - Shallow freeze vs Deep freeze

The difference between shallow freeze and deep freeze lies in how the freezing behavior is applied to nested objects. Here’s a breakdown of the two concepts:

---

1. Shallow Freeze

• Definition: Freezes only the top-level properties of an object.
• Behavior:
  • Prevents adding, removing, or modifying the top-level properties.
  • Does not freeze nested objects; they remain mutable.
• Example:

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

---

2. Deep Freeze

• Definition: Freezes the object along with all its nested objects and arrays, recursively.
• Behavior:
  • Ensures that no part of the object (top-level or nested) can be modified.
• Example:

const deepObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

// Deep freeze function
function deepFreeze(object) {
    const propertyNames = Object.getOwnPropertyNames(object);
    for (const name of propertyNames) {
        const value = object[name];
        if (value && typeof value === 'object') {
            deepFreeze(value); // Recursively freeze
        }
    }
    return Object.freeze(object);
}

deepFreeze(deepObject);

// Neither top-level nor nested properties can be changed
deepObject.name = "Bob"; // Ignored
deepObject.details.age = 30; // Ignored

console.log(deepObject);
// Output: { name: "Alice", details: { age: 25, city: "New York" } }

---

Comparison Table

Feature

Shallow Freeze

Deep Freeze

Feature	Shallow Freeze	Deep Freeze
Scope	Only freezes top-level properties.	Freezes top-level and nested objects.
Nested Object Mutability	Mutable.	Immutable.
Implementation	Object.freeze(object).	Custom recursive function with Object.freeze().
Example Mutation	Modifications to nested objects are allowed.	No modifications allowed at any level.

Scope

Only freezes top-level properties.

Freezes top-level and nested objects.

Nested Object Mutability

Mutable.

Immutable.

Implementation

Object.freeze(object).

Custom recursive function with Object.freeze().

Example Mutation

Modifications to nested objects are allowed.

No modifications allowed at any level.

---

Use Cases

1. Shallow Freeze:

   • Suitable when only the top-level properties need to be immutable.
   • Examples: Configurations where nested properties are managed independently.

2. Deep Freeze:

   • Ideal when complete immutability is required for the entire object hierarchy.
   • Examples: Ensuring data consistency for deeply nested objects in state management.

Considerations

• Performance:
  • Deep freezing can be computationally expensive for large or deeply nested objects.
• Cyclic References:
  • If the object contains circular references, you'll need to track visited objects to avoid infinite recursion.

Handling Cyclic References

To handle cyclic references, you can maintain a WeakSet of visited objects:

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

This prevents infinite recursion for cyclic references.

The above is the detailed content of JavaScript Object - Shallow freeze vs Deep freeze. For more information, please follow other related articles on the PHP Chinese website!