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.

let info = {
name: "name",
address: "address"
};

function doSomeThing() {
if (info.name = "Name to compare") { // change value
// handle something
}
info = { name: "Another name" }; // change value
// do something else
}

doSomeThing(info);
console.log(info);

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:

const v1 = {a: 1, b: '2', c: [1, 2, 3]}
// v1 = 2 // TypeError: Assignment to constant variable
v1.a = 3 // work
v1.c.push(4) // work
v1['d'] = true // work
delete v1.b // work
console.log(v1)

const v2 = [1, 2, 3]
v2.push(4) // work
console.log(v2)

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:

const v3 = {a: 1, b: '2', c: [1, 2, 3]}
Object.freeze(v3)
const v3 = Object.freeze({a: 1, b: '2', c: [1, 2, 3]}) // the same with above

// v3 = 2 // TypeError: Assignment to constant variable
// v3.a = 4 // Cannot assign to read only property 'a' of object
v3.c.push(4) // work
// v3['d'] = true // Cannot add property d, object is not extensible
// delete v3.b // Cannot delete property 'b' of #<Object>
console.log(v3)

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.

const v5 = {a: 1, b: '2', c: [1, 2, 3]}
Object.seal(v5)
// v4 = 2 // TypeError: Assignment to constant variable
v5.a = 4 // work
v5.c.push(4) // work
// v4['d'] = true // Cannot add property d, object is not extensible
// delete v4.b // Cannot delete property 'b' of #<Object>
console.log(v5)

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:

import {Immer, produce} from 'immer'

const immer = new Immer() // default {autoFreeze: true})
const v1 = {a: 1, b: '2', c: [1, 2, 3]}
const v2 = immer.produce(v1, draft => {
draft.c.push(3, 4) // could do anything with draft value
return draft
})
// v2.b = '3' // freeze object, Cannot assign to read only property 'b' of object '#<Object>'

const v3 = produce(v2, draft => {
draft.a = 2
return draft
})

const immer2 = new Immer({autoFreeze: false})
const v4 = immer2.produce(v1, draft => {
draft.c.push(3, 4)
return draft
})
v4.b = '3' // normal object, could be re-assign

console.log('v1', v1)
console.log('v2', v2)
console.log('v3', v3)
console.log('v4', v4)


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

Popular posts from this blog

A Handy Guide to Using Dynamic Import in JavaScript

Image
Introduction In JavaScript, when we import a file, the process usually happens synchronously, known as static import. However, as our applications grow, this synchronous loading can lead to slower initial page loads due to larger JavaScript bundles. Moreover, there are times when imports are necessary only under specific circumstances, leading to unnecessary loading times for users who might not even utilize those features. Details Instead of burdening all users with unnecessary imports, dynamic imports come to the rescue. They allow us to load modules or files only when they are needed, thus improving performance and user experience. Dynamic imports are invoked using the import() function and return a promise. When using default exports, the exported data can be accessed through the default field, while other data can be accessed through fields with matching names. Here's how you can use dynamic imports: import ( "ramda" ). then ( module => { const moduleDefaul
Read more

What is react-query? Why should we use react-query?

Image
Introduction You might have heard or seen others mention the react-query library quite often. Why should we use react-query when we can use useEffect to fetch data from an API ? This article will answer that question. What is react-query? react-query is a set of hooks for fetching, caching, and updating asynchronous data in React . Simply put, react-query is a library for fetching , caching , and updating asynchronous data when used in React . Why should we use react-query? Normally, there are many ways to fetch data from a server. Some popular methods include using useEffect and useState , or using a state management library like redux . export const Page = () => { const [ data , setData ] = useState (); useEffect (() => { const loadData = async () => { const response = await fetch ( hostAPI ). then ( response => response . json ()); setData ( response ) } loadData () }) return < DisplayData /> } This me
Read more

Explaining Async/Await in JavaScript in 10 Minutes

Image
Introduction For a long time, we've relied on callbacks to deal with asynchronous code in JavaScript. As a result, many of us have faced dreadful experiences dealing with deeply nested functions ( callback hell ). Callback hell Callbacks come with a lot of drawbacks. When we have multiple asynchronous operations, callbacks have to wait for each other to execute, prolonging the completion time. Additionally, writing nested callbacks makes our code messy and hard to maintain. In the ES6 (ECMAScript 2015) version, JavaScript introduced Promises. This was a fantastic replacement for callbacks and was quickly embraced by the community. Our new code looks similar to the old one, making it easier to follow and maintain. However, the issues with callbacks weren't completely resolved. Since the ES7 (ECMAScript 2016) version, Async/Await has been added to make asynchronous code in JavaScript look and feel easier to use. What is Async/Await? Async/Await is a feature of JavaScript that
Read more

Using styled-components in React/Next Applications

Image
Introduction When it comes to styling your React application with a css-in-js approach, styled-components stands out as a top choice. In this post, I'll walk you through how to utilize styled-components in a Next application. By default, Next provides a way to use  css-in-js  through styled-jsx. However, if you find styled-jsx cumbersome because it requires writing CSS within JSX , which can make your components lengthier, then styled-components might be the right fit for you. Installation of styled-components npm install styled-components // or yarn add styled-components Example usage: import styled from 'styled-components' const Wrapper = styled . div ` color: red; text-align: center; ` // Component with input param const Wrapper2 = styled . div <{ $color ?: string }> ` color: ${ props => props . $color } ; text-align: center; ` export default function Index () { return ( <> < Wrapper > Demo 1 </ Wrapper >
Read more

Enhance Security for Node.js Applications

Image
1. Limiting the number of requests Limiting the number of requests (from a single IP address within a specific timeframe) is a method used to prevent denial-of-service (DOS, DDOS) attacks or brute force attacks that could overload your server. If you're using Express, integrating this is quite straightforward using the express-rate-limit  package. import * as express from 'express' import helmet from 'helmet' import expressRateLimit from 'express-rate-limit' const app = express () const limiter = expressRateLimit ({ windowMs: 10 * 60 * 1000 , // ms, ~10 minutes max: 50 , // limit each IP to 50 requests }) const specificLimiter = expressRateLimit ({ windowMs: 60 * 60 * 1000 , // 1 hour window max: 2 , // start blocking after 2 requests message: 'Too many requests' , // default 429 TOO MANY REQUESTS }) app . use ( limiter ) // use for all route . use ( '/common' , ( req , res ) => { res . json ({
Read more

Understanding React Server Component

Image
Introduction As most of us already know, React enables us to break down interfaces into independent parts called Components, facilitating reuse and customization. Currently, React Components are divided into two main types: Client Components : widely used in Client Side Rendering (CSR) applications. Server Components : a new type of component that renders on the server side before being sent to the client (browser). At first glance, it may seem similar to Server Side Rendering (SSR) which has been used for a while, but in reality, these two concepts have certain differences. The Difference of RSC (React Server Component) Ease of development: React Server Component allows easy direct connection to server-side resources such as databases or internal services, streamlining development processes. Improved performance: By reducing latency in communication between client and server, React Server Component enhances overall application performance. Reduced source code size: Libraries utili
Read more

Installing PostgreSQL with Docker

Image
Introduction In this guide, I'm going to walk you through installing PostgreSQL database and pgAdmin using Docker. The big advantage here is it's quick and straightforward. You won't need to go through a long manual installation process (and potentially spend time fixing errors if they arise). Installing Docker If you don't already have Docker installed on your machine, you'll need to do that first. At this step, you'll need to search Google because the installation process depends on the operating system you're using. Typically, installing Docker on Windows is simpler compared to using Ubuntu . Installing PostgreSQL Once Docker is set up, the next step is to install the PostgreSQL image. Here, I'm using postgres:alpine , which is a minimal version of PostgreSQL (it's lightweight and includes all the essential components needed to use PostgreSQL). docker run -- name postgresql - e POSTGRES_USER ={ username } - e POSTGRES_PASSWORD ={ passwor
Read more

Sitemap

Image
A page aggregator designed for easy reference and search, compiling all blog posts for convenient access.
Read more

Using PureComponent and React.memo to Improve Performance in React

Image
Introduction PureComponent in React is built on the concept of Pure Function. In this article, let's dive into PureComponent and the memo hook in React, as well as how to apply these tools to improve performance in React applications. What is a Pure Function? First off, it's important to understand the concept of a Pure Function, which will always return the same result with the same input parameters. To put it simply, the same input will always yield the same output. For example: // this is pure function function sum ( a : number , b : number ): number { return a + b ; } sum ( 1 , 2 ); // always return 3 const offset = 3 ; // this is not pure function function sumWithOffset ( a : number , b : number ): number { return a + b + offset ; } sum ( 1 , 2 ); // result depend on offset value What is a Pure Component? In React, a PureComponent is considered a component that only renders when there's a change in props or state, where the change in props or state is det
Read more