In JavaScript, we use an 6 to store multiple values as a complex data structure. You create an object with a pair of curly braces 7. Show An object can have one or more properties. Each of the properties is a key-value pair separated by a 8. The key must be a string or JavaScript symbol type. The value can be of any type, including another object.With that explanation of an object, let's create one to see how it works:
Here we have created an object with two properties (name, age) and their respective values. We have created a variable called 9 with the 0 keyword and we've assigned the object to it as a value.By default, objects are 1. This means once they're created, you can add a new property to them, modify the value of an existing property, or delete a property.In my early years of programming, I found the terms 1 and 3 very confusing. Let me try explaining it in simple English.Mutable is something you can change. Immutable is just the opposite of that. So, 4 is the ability to change over time. 5 means something is unchanging over time.There could be situations where you may not want an object to change programmatically. Therefore you'll want to make it immutable. When an object is immutable, you can't add a new property to it, modify it, or delete an existing property. There is no way even to extend it. This is what a 6 is, which we'll learn about, practice with, and understand in this article.I discussed frozen objects in a Twitter thread recently. Please feel free to have a look. This article will expand on the thread with more details and examples. How to Create a Frozen Object in JavaScript You can freeze (make immutable) an object using the function 7. The object passed to the 8 method will become immutable. The 9 method also returns the same object.Let's create an object of supported languages:
If you don't want this object to change after it is created, just use the 8 method to make it immutable.
Now let's try changing either of the objects and see what happens:
You'll get errors when you try changing a frozen object (immutable object) in the JavaScript 1 environment.Hold On – doesn't the 0 keyword do the same thing?Ah, not quite. The 0 keyword and 4 are not the same things. When you assign an object to a variable created with the const keyword, you can not reassign another value. However, you can modify the assigned objects in whatever way you want.Let's understand the difference with an example. This time, we will take the same 5 object but will not freeze it.
Now you can modify it like this:
Now the 5 object is changed to the following:So, this change is allowed. But if you try to assign a new object to the 5 variable:
You will get this error: I hope the difference is clear now – it's also a frequently asked interview question. Why Do We Need Frozen Objects in JavaScript?Again, we need frozen objects when we need immutability. In object-oriented programming, it is common to have APIs that we can not extend or modify outside the current context. Do you remember the 8 keyword in Java? Or how in the Kotlin programming language, lists are immutable by default? Trying to mutate them at run time causes errors. Immutability is an essential concept to use in functional programming.Immutability is often important in the JavaScript programming language as well. You may want a configuration object to be immutable, a fixed set of supported language for your applications, or anything else that you don't want to change at the run time. You Can Freeze an Array, TooIn JavaScript, 9 are objects under the hood. So you can also apply 4to arrays to make them immutable.Let's take an array of human senses:
We can now make it immutable like this:
Now, try to push an element to that array. It's not possible.
The output will be the following error: Try to remove an element from the array: 0You'll get this error: Please notice the error in both the cases. It clearly says, the add and delete property is not allowed as the underlying object is not extensible. Object Freeze is ShallowA JavaScript object property can have another object as its value. It can go to a deeper level down. When we freeze an object, it is a 1 freeze. This means that only the top-level properties are frozen. If any of the property's values are another object, that inner object is not frozen. You can still make changes to it.Let's understand this with the example of a configuration object: 1The config object has properties like db, host, password, and port with simple string types values. However, the admin property has an object as the value. Now, let's freeze the config object. 2Now, let's try to change the db name. 3It is not allowed as the object is frozen. However, you can do this: 4Here we have changed the property of the nested object. As the object freezing is shallow in nature, it is not going to stop us from changing the nested object. So, if you log the object in the console, this is what you'll get: How to Deep Freeze an Object in JavaScriptBut how do you deep freeze an object if you need or want to? You may want to freeze all the properties of the object to the deepest level possible, right? We can do that using recursion. In programming, recursion is a methodology that uses a procedure, function, or algorithm to call itself. Check out this article for an in-depth understanding. So, we can iterate through every property and recursively apply the freeze method to everything. It will make sure that the nested objects are also frozen. To do that, you can write a simple function like this: 5What's the Diffecrence Between freeze(), seal(), and preventExtentions()?With Object.freeze we achieve full immutability. But there are two other methods that provide object immutability, only partially.
Here is a table to compare them: There is no straightforward ways to unfreeze a frozen object in JavaScript. You can probably simulate an unfreeze by making a copy of the object maintaining the prototype. Here is an NPM package that does the same with a shallow copy. In SummaryTo Summarize,
That's all for now. I hope you've found this article insightful, and that it helps you understand object immutability more clearly. Let's connect. You will find me active on Twitter (@tapasadhikary). Feel free to give a follow. I've also started sharing knowledge using my YouTube channel, so you can check it out, too. You may also like these articles:
ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT Writer . YouTuber . Creator . Mentor If you read this far, tweet to the author to show them you care. Tweet a thanks Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started What is object freeze in JavaScript?A frozen object can no longer be changed: new properties cannot be added, existing properties cannot be removed, their enumerability, configurability, writability, or value cannot be changed, and the object's prototype cannot be re-assigned. freeze() returns the same object that was passed in.
What is difference between object freeze and object seal?seal(objectname); Object. freeze(objectname);
...
javascript.. How to deep freeze the object in js?To do that, you can write a simple function like this: const deepFreeze = obj => { Object. keys(obj). forEach(prop => { if (typeof obj[prop] === 'object') deepFreeze(obj[prop]); }); return Object.
How to remove object freeze in JavaScript?There is no way to do this, once an object has been frozen there is no way to unfreeze it. This is technically correct as far as mutating the existing object. However, you can copy/clone the existing object and mutate it's properties now.
|