Open In App

How to deep-freeze an object in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see what is the problem with objects in JavaScript and why we need to “deep-freeze” an object in JavaScript. We will also learn how to “deep-freeze” an object in JavaScript.

Problem with Object in JavaScript:

We all know that JavaScript objects are mutable. How can we make them immutable? Define them as const but if we declare a JavaScript object as a const, it only prevents the object from getting reassigned as a whole. We can still reassign the properties and change their value.

Example 1:

Javascript




const obj1 = { key1: "val1", key2: "val2", key3: "val3" };
console.log("Before Change");
console.log(obj1);
obj1.key1 = "val";
console.log("After Change");
console.log(obj1);


Output:

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val",
key2: "val2",
key3: "val3"
}

There are several methods that can be used to deep-freeze an object.

  • Using Object.freeze()
  • Using JSON.parse() and JSON.stringify()
  • using Object.freeze() and Object.isFrozen()

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1 : Using Object.freeze()

We can use an Object.freeze() method provided by JavaScript to prevent the addition of new properties with updating and deleting of existing properties. 

Example : In The example demonstrates how to use Object.freeze() to make an object immutable, preventing changes to its properties.

Javascript




const obj1 = { key1: "val1", key2: "val2", key3: "val3" }
console.log("Before Change")
//before change
console.log(obj1);
 
Object.freeze(obj1);
obj1.key1 = "val";
console.log("After Change")
//after change
console.log(obj1);


Output

Before Change
{ key1: 'val1', key2: 'val2', key3: 'val3' }
After Change
{ key1: 'val1', key2: 'val2', key3: 'val3' }


Approach 2 : Using JSON.parse() and JSON.stringify():

The approach involves converting the object to a JSON string using JSON.stringify(), then parsing it back into a new object using JSON.parse(). This creates a deep-frozen object, making it immutable.

Example: The example showcases deep-freezing an object using JSON.parse() and JSON.stringify(),To deep-freeze the object, we first convert it to a JSON string using JSON.stringify(), and then parse it back into a new object using JSON.parse(). This creates a new object with the same structure as the original, but it is a completely independent copy and is now deep-frozen,After deep-freezing, any attempts to modify the properties of deepFrozenObj won’t have any effect because it is now immutable. The

Javascript




const obj1 = { key1: "val1", key2: "val2", key3: "val3" };
 
console.log("Before Change");
console.log(obj1);
 
// Create a deep copy of obj1 with a reviver function
const deepFrozenObj = JSON.parse(JSON.stringify(obj1), (key, value) => {
    if (typeof value === "object" && value !== null) {
        return Object.freeze(value); // Freeze nested objects
    }
    return value;
});
 
// Attempting to modify properties of deepFrozenObj
deepFrozenObj.key1 = "val";
// This won't modify the deepFrozenObj
deepFrozenObj.key2 = "newVal";
// This won't modify the deepFrozenObj
 
console.log("After Change");
console.log(deepFrozenObj);


Output

Before Change
{ key1: 'val1', key2: 'val2', key3: 'val3' }
After Change
{ key1: 'val1', key2: 'val2', key3: 'val3' }

Approach 3: using Object.freeze() and Object.isFrozen()

The approach recursively deep-freezes an object and its nested properties using Object.freeze() and Object.isFrozen(). This makes the object and its properties immutable, preventing changes.

Example: The example demonstrates a recursive deep-freezing function using Object.freeze() and Object.isFrozen() to make an object and its nested properties immutable, preventing modifications.

Javascript




const obj1 = {
    key1: "val1",
    key2: "val2",
    key3: ["val3", "val4", "val5"]
};
 
const deepFreeze = (obj1) => {
    Object.keys(obj1).forEach((property) => {
        if (
            typeof obj1[property] === "object" &&
            !Object.isFrozen(obj1[property])
        )
            deepFreeze(obj1[property]);
    });
    return Object.freeze(obj1);
};
deepFreeze(obj1);
 
console.log("Before Change");
console.log(obj1);
obj1.key3[0] = "val";
obj1.key3[1] = "val";
obj1.key3[2] = "val";
console.log("After Change");
console.log(obj1);


Output

Before Change
{ key1: 'val1', key2: 'val2', key3: [ 'val3', 'val4', 'val5' ] }
After Change
{ key1: 'val1', key2: 'val2', key3: [ 'val3', 'val4', 'val5' ] }




Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads