Constants, Object.freeze, Object.seal and Immutable in JavaScript
Introduction
In this article, we're diving into Immutable and Mutable in JavaScript, while also exploring how functions like Object.freeze() and Object.seal() relate to Immutable. This is a pretty important topic that can be super helpful in projects with complex codebase.
So, what's Immutable?
Immutable is like a property of data in JavaScript. It means once the data is created, it can't be changed. This allows for better memory management and catching changes promptly. This is a big deal and totally contrasts with Mutable, which is the default nature when you initialize data in JavaScript.
Implementing Immutable in a project makes development much smoother, reduces issues that crop up, and saves a ton of effort and time for maintenance down the road.
But what happens if you don't use Immutable?
Let me give you an example of how changing data during development can lead to some serious issues.
Here's a simple example to show how data can easily be changed. You might not see a big problem here, but imagine in a large project with lots of complex functions. Changing data like this can hide many risks, leading to unnecessary issues and significantly increasing the time spent tracking issues and maintaining the code.
Using constants (const)
When a variable is defined as a constant, it means you can't assign a different value to that variable. However, it's important to note that in JavaScript, there are reference types, and even a constant variable's reference value can still be changed.
For example:
As you can see, even when using constants, the fields within an object can still have their values changed, and new fields can be added or existing ones removed. Generally, data types like object (including array) remain mutable.
Using Object.freeze()
This is a built-in function provided by JavaScript to prevent modifications, additions, or deletions of existing fields within an object.
Let's take a look at an example:
You can see there's a significant improvement in immutability when using Object.freeze() compared to just using constants. However, for reference types, they can still be altered.
In JavaScript, there's also the Object.isFrozen function provided to check if a variable is a frozen object.
Using Object.seal()
With the built-in function Object.seal, it only prevents adding new properties or deleting existing ones, but it still allows changing the value of properties.
Similarly to Object.freeze, Object.seal has the Object.isSealed function to check if an object is sealed.
Using the immer library
Let me introduce you to the immer library, which provides comprehensive immutable capabilities, suitable for both Front-end and Back-end development. It's a fantastic library, straightforward to use, and highly recommended by many developers.
Installation: npm i immer
After that, you can use this library very simply following the instructions below:
Conclusion
In this article, I introduced the concept and provided you with examples related to using const, Object.freeze, and Object.seal to support you in implementing immutability in JavaScript.
You can combine constants with Object.freeze or Object.seal to create immutable objects, as these are features readily supported by JavaScript.
However, if you want absolute immutability, then you should use the immer library.
Happy coding!
Comments
Post a Comment