Learn to Prevent Modification of Objects in Javascript using the Object.freeze() method
The Object.freeze() method is a built-in method of function object.This can be assigned to Objects, Variables, and Arrays. This blocks any updation of objects once it is assigned freeze() method. If we try to override the values of objects then it will throw an error.
In Javascript it is possible to update objects through the console to prevent this Object.freeze() method can be used.
This must be only used to assign constants or objects to those values or properties that must not be updated externally.
Syntax
Object.freeze(object);
Table of Contents
- Freezing values of Objects and Variables
- Check if Object is Freezed
- Freeze Object on Strict Mode
- Deleting Freezed Object
- Conclusion
Freezing values of Objects and Variables
var person = {
"first_name" : "Sunil",
"last_name" : "Kumar",
"age" : 35,
}
Object.freeze(person);
person.first_name="Kiran";
console.log(person);
//Console Output
{first_name: "Sunil", last_name: "Kumar", age: 35}
We passed the Object person to freeze() method and after that, we updated first_name=”Kiran” but this did not affect the person object and old values got printed.
var price = 100.25;
Object.freeze(price);
price = 111;
console.log("price is : "+price);
//Console Ouput
price is : 111
The Object.freeze() method does not work on variables. Even after assigning a value of price gets updated. This is because we actually cannot freeze variables if we want to do so we must initialize the variable with keyword const.
const price = 100.25;
price = 111;
console.log("price is : "+price);
//Console Ouput
Uncaught TypeError: Assignment to constant variable.
Assignment to constant variable exception while updating the const variable
When tried to update the value of a constant variable it throws an exception. We can only assign value to the const variable on initialization.
var fruits = ["apple", "organ"];
Object.freeze(fruits);
fruits[0] = "bannana";
console.log("fruits array after changing apple to bannana : "+fruits);
fruits.push("mango");
console.log("fruits array after adding new fruit mango : "+fruits);
//Console Ouput
fruits array after changing apple to bannana : apple,organ
Uncaught TypeError: Cannot add property 2, object is not extensible
Exception Cannot add property while modifying a property of Object.freeze()
Check if Object is Freezed
var fruit = {"name" : "Apple", "color" : "red"};
console.log("Is Object Fruit Freezed : "+Object.isFrozen(fruit));
Object.freeze(fruit)
console.log("Is Object Fruit Freezed : "+Object.isFrozen(fruit));
//Console Output
Is Object Fruit Freezed : false
Is Object Fruit Freezed : true
Check wheather object is frozen using Object.isFrozen( ) method
Freeze Object on Strict Mode
In the above all examples we have not used Javascript use strict.
Javascript use strict helps us to write better code which basically has fewer errors and warnings.
We’ll consider two same examples where we update one object without use strict and another with use strict mode.
Example with `use strict`
var employee = {"name" : "Sam", "designation" : "Developer"};
Object.freeze(employee);
employee.designation = "Engineer";
console.log(employee);
//Console Output
{name: "Sam", designation: "Developer"}
Javascript freezing an object
'use strict'
var employee = {"name" : "Sam", "designation" : "Developer"};
Object.freeze(employee);
employee.designation = "Engineer";
console.log(employee);
//Console Output
Uncaught TypeError: Cannot assign to read only property 'designation' of object '#<Object>'
Exception thrown Cannot assign to the read-only property when assigning value to a frozen object using use strict declaration
Deleting Freezed Object
It is not possible to modify or delete object properties after the object applied to the freeze() method. When used with use strict mode it will throw exception Cannot delete the property.
Look at the below examples one without use strict and another with use strict.
var names = ["John", "Naresh"];
Object.freeze(names);
console.log("Names before deleting : ",names);
delete names[1];
console.log("After before deleting : ",names);
//Console Output
Names before deleting : (2) ["John", "Naresh"]
After before deleting : (2) ["John", "Naresh"]
Using the same with use strict mode.
'use strict'
var names = ["John", "Naresh"];
Object.freeze(names);
console.log("Names before deleting : ",names);
delete names[1];
console.log("After before deleting : ",names);
//Console Output
Names before deleting : (2) ["John", "Naresh"]
Uncaught TypeError: Cannot delete property '1' of [object Array]
Exception Cannot delete property thrown while deleting a property of frozen object using use strict declaration
Conclusion
So it’s time to say bye we have come to the end of our post on Learn to prevent modification of Objects in Javascript using Object.freeze() method. If you like our content then please do share it
and comment to clarify your doubts.
