Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
communitycreator

What is Object.freeze in JavaScript?

Programming Bytes

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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) );

RELATED TAGS

javascript
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring