What is Object.freeze in JavaScript

The Object.freeze method in JavaScript freezes an object. This means one cannot add or remove any properties to an object. Additionally, you cannot change the key/value associations of the properties of the frozen object. Keep in mind though, that if the values of the properties of an object are other objects such as an array, set or a map, the freeze does not freeze them. Watch the complete video to see these use cases in action.

Code

'use strict'
let person = {
name: "Tony Stark",
phone: "500-124-9900",
emails: ["tony@stark.com", "ceo@stark.com"]
}
person["location"] = "California"
console.log(person)
let freezedPerson = Object.freeze(person)
freezedPerson.emails.push("investors@stark.com")
console.log(freezedPerson)

Full Transcript

0:00 Hello there, Harit here from bonsaiilabs. In today's video, we will learn what freeze method on Object does on JavaScript. Let's say we have an object called person and this contains two entries, the name and the phone number. When you freeze an object using object.freeze, it locks the current object. That means you can no longer add or remove properties on this object. Additionally, it locks the existing properties, which means you can no longer change the association of the key value pairs. Let's see them in action. Here we have a person object and we are running this a script in a strict mode. I'm going to add a new location property and assign a value of California to that. Next I'm going to print that person value onto the console. As I run, we can confirm that the new location property has been added to the original person object.

0:50 Next, we are going to call the object.freeze method and pass in the person object as the argument to this method. Now it does two things. First, it freezes the current person object and it returns the same object back as the return value. We're saving that return value into the variable call as freezedPerson. Next we are going to update the name property and assign a value of Iron Man to it. Now as we go ahead and run, we can confirm that it throws an error by saying that it's a read only property and we cannot assign any new value to it. But how about we add a new property to the person object. This time we are going to add a new property called birthYear and assign a new value which is 1972. As we hit run, we can see a different error which says we cannot add a property birthYear because the object person is not extensible anymore.

1:45 But what if the values are other objects such as an array in this case. As mentioned before, with object.freeze, you cannot change the association of key to the value, which means emails property cannot be associated with any other value or an object. However, since the value of email is an array, the contents can change. This means with object.freeze, you cannot freeze the values of the properties if they are objects. In our example, the object.freeze freezes the person object, but it cannot freeze any value insight person, if the value is an object such as an array, set or a map. Let's see that in action. We're first going to update the emails property, we are going to change the emails to a new object and as we hit run we get the same error which says cannot assign to a read only property because emails association is locked to an array.

2:38 However, we can update the emails array by using the arrays.push because emails is an array and assigning it a new value which is investors@stark.com. Next, we are going to print the value of the freezed person on the console to make sure that there are now three values for the emails and as we can confirm now that they're three emails in the emails array. And that's it. If you like the video, consider subscribing us to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. See you next time.