What is Object.freeze in JavaScript?

Object.freeze()

Object.freeze() will prevent an object from being modified. Once we freeze an object, we:

  1. Cannot remove a property
  2. Cannot add new a property
  3. Cannot change the value of an existing property
  4. Cannot change the enumerability, configurability, or writability of the property

This method returns the object, at which the freeze method is called.

let user = {
name : "John",
age : 20
}
let frozenUser = Object.freeze(user);
// add
frozenUser.profession = "doctor 👨‍⚕️ ";
console.log("After adding new property ", frozenUser); // {name: "John", age: 20}
// delete
delete frozenUser.name;
console.log("After deleting name property ", frozenUser); // {name: "John", age: 20}
// modify
frozenUser.name = "Raj";
console.log("After modifying name property ", frozenUser); // {name: "John", age: 20}
// change enumerable property
try{
Object.defineProperty(frozenUser, 'name', {enumerable : false});
//throws an error cannot redefine property
} catch(e){
console.log("Error on changing enumerable to false");
}
//bothe the user object and frozen object points to same object
console.log(frozenUser === user); // true

All the operations above will throw a TypeError exception in strict mode.


We can also freeze an array.

let array = [1,2,3,4,5]
let frozenArray = Object.freeze(array);
frozenArray[0] = 10;
console.log(frozenArray); // [1,2,3,4,5]

When we try to add or remove a value, it will throw a TypeError.


The object freeze method does a shallow freeze, meaning that if the values of properties are objects themselves, those objects are not frozen.

let user = {
   name : "John",
   address : {
      doorNo : 20
   } 
}
Object.freeze(user);

The above code will prevent the addition, deletion, and modification of a property to the user object; but, the freeze will not be applied to the address property of the user object (i.e., we can change the address object) because the address property is an object itself .

let user = {
name : "John",
address : {
doorNo : 20
}
}
let frozenObject = Object.freeze(user);
user.address.doorNo = 100;
user.address.street = "First Street";
console.log("After changing address", user.address); // {doorNo: 100} // {doorNo: 100, street: "First Street"}

Implementing deep freeze

If you want to completely freeze your object:

function deepFreeze(object) {
// Retrieve the property names defined on object
var propNames = Object.getOwnPropertyNames(object);
// Freeze properties before freezing self
for (let name of propNames) {
let value = object[name];
object[name] = value && typeof value === "object" ?
deepFreeze(value) : value;
}
return Object.freeze(object);
}
let user = {
name : "John",
address : {
doorNo : 20
}
}
let frozenObject = deepFreeze(user);
user.address.doorNo = 100; // no changes will be done
user.address.street = "First Street"; // no changes will be done
console.log("After changing address", user.address);

Check if an Object is frozen

We can use the isFrozen method to check if an object is in the frozen state:

let obj = {
name : "John"
}
console.log("Before freeze isFrozen = ", Object.isFrozen(obj) );
Object.freeze(obj);
console.log("After freeze isFrozen= ", Object.isFrozen(obj) );

Free Resources

Attributions:
  1. undefined by undefined