What is the use of the Object.freeze() method in JavaScript?

JavaScript is a dynamic language, which means that objects and their properties can be modified at runtime. However, in some cases, you may want to prevent this kind of modification. That’s where the Object.freeze() method comes in handy.

Object.freeze() is a built-in method of the JavaScript Object class that allows you to make an object immutable. Once an object is frozen, its properties cannot be added, deleted, or modified in any way. This method returns the frozen object as the output.

Here’s an example of how to use the Object.freeze() method:

const myObject = {
  name: "John",
  age: 25,
};

Object.freeze(myObject);

// Trying to modify the properties of the frozen object
myObject.name = "Jane";
myObject.age = 30;

console.log(myObject); // Output: { name: 'John', age: 25 }

In the above code snippet, we define an object myObject with two properties: name and age. After that, we use the Object.freeze() method to freeze the myObject object. Finally, we try to modify the properties of the frozen object, but they are not updated as expected.

As you can see, the Object.freeze() method makes an object read-only. It doesn’t allow you to add, delete or modify properties of the object. If you try to modify the properties of a frozen object, JavaScript will not throw any error, but it will silently ignore the modification.

Let’s look at some more examples of how to use the Object.freeze() method:

const myObject = {
  name: "John",
  age: 25,
  address: {
    street: "123 Main St",
    city: "New York",
    state: "NY",
  },
};

Object.freeze(myObject);

// Trying to modify the properties of the frozen object and its nested objects
myObject.name = "Jane";
myObject.age = 30;
myObject.address.city = "San Francisco";

console.log(myObject);
// Output: { name: 'John', age: 25, address: { street: '123 Main St', city: 'San Francisco', state: 'NY' } }

In this example, we define an object myObject with three properties: name, age, and address. The address property is an object with three nested properties: street, city, and state. We then use the Object.freeze() method to freeze the myObject object. Finally, we try to modify the properties of the frozen object and its nested objects, but the modifications are not applied as expected.

As you can see, the Object.freeze() method makes an object and its nested objects read-only. It doesn’t allow you to modify properties of the object and its nested objects.

Here’s another example that demonstrates the use of the Object.freeze() method with arrays:

const myArray = ["apple", "banana", "orange"];

Object.freeze(myArray);

// Trying to modify the frozen array
myArray.push("mango");

console.log(myArray); // Output: [ 'apple', 'banana', 'orange' ]

In this example, we define an array myArray with three elements: apple, banana, and orange. We then use the Object.freeze() method to freeze the myArray array. Finally, we try to modify the frozen array by pushing a new element, but the modification is not applied as expected.

As you can see, the Object.freeze() method also makes arrays read-only. It doesn’t allow you to modify the elements of the frozen array.

It’s worth noting that the Object.freeze() method is shallow, which means that it only freezes the object’s properties at the top level. If an object property is itself an object or an array, it is not frozen, and its properties can be modified.

Let’s see an example to understand this:

const myObject = {
  name: "John",
  age: 25,
  address: {
    street: "123 Main St",
    city: "New York",
    state: "NY",
  },
};

Object.freeze(myObject);

// Trying to modify the properties of the nested object in the frozen object
myObject.address.street = "456 Second St";

console.log(myObject);
// Output: { name: 'John', age: 25, address: { street: '456 Second St', city: 'New York', state: 'NY' } }

In this example, we define an object myObject with three properties: name, age, and address. The address property is an object with three nested properties: street, city, and state. We then use the Object.freeze() method to freeze the myObject object. Finally, we try to modify the properties of the nested object in the frozen object, and surprisingly, the modification is applied as expected.

As you can see, the Object.freeze() method only freezes the top-level properties of an object. If an object property is itself an object, it is not frozen, and its properties can be modified.