Have you ever been caught up in a situation where it is required to make an immutable JavaScript object and prevent it from changing the values of existing properties? If that’s the case, utilize the “Object.freeze()” method in your JavaScript program and make it an immutable data type.
What is Object.freeze() method
The “Object.freeze()” method is used to freeze an already declared object and restrict it all from manipulation such as adding new properties, removing existing properties, and updating the values of the existing properties.
This post will discuss the method to freeze an object in JavaScript. So, let’s start!
How to freeze an object in JavaScript
By default, JavaScript objects are of “mutable” data type, which means that their values can be changed over time. However, you can make it “immutable” by declaring it as a “constant”.
When an object is created using the “const” keyword, you can still individually reassign or change the values of its properties, but being an immutable data type, JavaScript does not allow you to reassign the whole object to something else.
Have a look at the following example to understand the stated concept.
Example
For instance, we will create an object named “employee” having the following properties:
const employee = {
age: 30,
name: “Alex”
};
console.log(employee);
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-49.png" data-lazy- height="310" src="data:image/svg xml,” width=”890″>
After doing so, we will try to update the values of the “employee” object as a whole:
employee = {
age: 35,
name: “Paul”
};
console.log(employee);
As you can see, the execution of the specified operation output a “TypeError” which states that assignment to an already declared constant variable is not possible:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-54.png" data-lazy- height="260" src="data:image/svg xml,” width=”814″>
Now, we will check the other case by individually reassigning a value to the employee object’s “name” property:
employee.name= “Max”;
console.log(“After changing the employee.name property value”);
console.log(employee);
The given output signifies that the “employee.name” property value is updated to “Max”:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-58.png" data-lazy- height="296" src="data:image/svg xml,” width=”888″>
Now, it is proved that although an object becomes “immutable” with the help of the “const” keyword, it still permits you to individually reassign its property values.
You can “freeze” an object in a situation where it is needed to restrict the object from updating the existing properties or addition of new properties.
Want to do so? Follow the below-given section to know more about freezing an object in JavaScript.
How to freeze an object in JavaScript using Object.freeze() method
The “Object.freeze()” method is utilized to freeze an already declared object. When an object gets freezed, it prevents the deletion of the existing object properties, addition of new properties, updation of the enumerability, writability, and configurability of existing properties. Moreover, you cannot change the object prototype and value of the existing properties after freezing the related object.
Syntax
Here, “obj” represents the JavaScript object which will be freezed with the help of the “Object.freeze()” method.
Example: How to freeze an object in JavaScript using Object.freeze() method
First of all, we will freeze the “employee” object by using the “Object.freeze()” method:
At the time of freezing the “employee” object, the value of “employee.age” is “30,” and the “employee.name” is set as “Max”:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-60.png" data-lazy- height="228" src="data:image/svg xml,” width=”790″>
In the next step, we will verify if the “employee” object is freezed or not. For this purpose, JavaScript offers “Object.isFrozen()” built-in method that accepts a JavaScript “object” as an argument and returns “true” if the passed object is freezed, otherwise the return case of “Object.isFrozen()” method will be set to “false”:
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-61.png" data-lazy- height="149" src="data:image/svg xml,” width=”832″>
The value returned by the “Object.isFrozen()” method is “true,” which indicates that the “employee” object is successfully freezed.
Updating freezed object property in strict mode vs non-strict mode
Now, we will try to update the “employee.name” property value to “Paul”:
employee.name= “Paul”;
console.log(employee);
If you are in “non-strict” mode, then the specified operation of updating value will fail silently:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-62.png" data-lazy- height="181" src="data:image/svg xml,” width=”790″>
However, in the case of “strict mode”, a “TypeError” will be also displayed on the console, while terminating the updation operation of the freezed “employee” object:
“use strict”;
employee.name= “Paul”;
console.log(employee);
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-63.png" data-lazy- height="238" src="data:image/svg xml,” width=”919″>
Deleting freezed object property in strict mode vs non-strict mode
Similarly, you cannot delete an existing property of a freezed object:
delete employee.name;
console.log(employee);
The above-given code will try to remove the “name” property of the “employee” object and fail silently in “non-strict” mode:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-64.png" data-lazy- height="248" src="data:image/svg xml,” width=”804″>
Whereas, in “strict mode”, a “TypeError” will be shown on the console, which states that you cannot delete the “name” property of the “employee” object that we have freezed with the help of the “Object.freeze()” method:
“use strict”;
delete employee.name;
console.log(employee);
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-65.png" data-lazy- height="217" src="data:image/svg xml,” width=”853″>
That was all essential information related to freezing an object in JavaScript. You can investigate further according to your preferences.
Conclusion
The JavaScript Object.freeze() method is utilized to freeze a declared object. When an object gets freezed, it prevents the deletion of the existing object properties, addition of new properties, updation of the enumerability, writability, and configurability of existing properties. Moreover, you cannot change the object prototype and value of the existing properties after freezing it. This write-up discussed the method to freeze an object in JavaScript.
About the author
<img alt="" data-lazy-src="https://secure.gravatar.com/avatar/c73b74cd8044d2e9b300610f5af77d0b?s=112&r=g" data-lazy- height="112" src="data:image/svg xml,” width=”112″>
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.
