Search Here

Learn to Prevent Modification of Objects in Javascript using the Object.freeze() method

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

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

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 property of Object.freeze()

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

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

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 read only property when assigning value to a frozen object using use strict declaration

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

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.

Summary
Review Date
Reviewed Item
Learn to prevent modification of Objects in Javascript using the Object.freeze() method
Author Rating
51star1star1star1star1star
Software Name
Javascript Programming
Software Name
Windows Os, Mac Os, Ubuntu Os
Software Category
Web Development