DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Raghav Dhingra
Raghav Dhingra

Posted on • Updated on

Immutable Data Structures for Functional JavaScript

First of all, we will know about what is Immutable. Actually, Immutable means not mutable, or changeless. Immutable makes a data structure constant, we cannot change its value by any means.
Let’s assume that we have made a global array and we want to keep it’s value constant throughout the code. For example, we have taken an array with a name β€œfoo”:
var foo = [ 1 , 2 , 3 ];
Now, by-mistake we have used same variable name β€œfoo” as a local variable inside a function or anywhere for defining any array or value. Then, its value gets change. For Example, we have made a new variable β€œfoo1”, and in this suppose we have assigned its value exactly same as foo just adding one more element (say β€œ 4 ” ) by using push() :
var foo1 = foo.push(4);
Now, the value for β€œfoo” will also change from this code because the push() function will add 4 to the end of the array of β€œfoo” due to which its value becomes β€” [ 1 , 2 , 3 , 4 ]
This is known as Mutation. That is we have change the value for a particular data structure which we don’t want to, either by mistake, or doing bad code practice, or by one-or-the other means.
But, we don’t want our variable β€œfoo” to re-assign its value to something else. Therefore, we can make our variable immutable so that its value can’t be change even when we have reassign its value somewhere in the code.
But now what about the value of β€œfoo1”. We have to assign its value to [ 1 , 2 , 3 , 4 ] without changing the value of β€œfoo”.
Now most of us think about directly assigning the value to β€œfoo1” as:
var foo1 = [1,2,3,4];
It is right but what about when we have to make a big files having hundreds or thousands of variables and function. Also, which have same elements or values in common. Then, if we assign directly assign each value to the variable, it will make the code bulkier and will covers more memory. This type of practices are bad.
To fix this problem, we can use various types of libraries like β€œMORI” or we can use β€œIMMUTABLE.JS”. These libraries help us to make the value of a the variable constant so that its value can’t be change in between the code. Also, it can be helpful in defining another variables by the help of the immutable variables made by using these libraries. For example, we have use β€œimmutable.js” library and we have defined the value of β€œfoo” by using it:
var imjs = require(β€œimmutable”);
var foo = imjs.List.of(1,2,3); //Results in [1,2,3]
var foo1 = foo.push(4); //Results in [1,2,3,4]
Now, the value of β€œfoo” will not change because we have made it immutable. That is its value is [ 1 , 2 , 3 ]. But the value of β€œfoo1” will be now β€” [1 , 2 , 3 , 4 ].
Working of these Libraries:
Another important thing is that if we want to introduce a new value instead of a particular value of the array β€œfoo” without changing the original value of the array β€œfoo”. The same typo will come that it will change the original value. The simplest way to handle this in a very short way is using a tree structure.
We can take an example of a tree which haves a main trunk which gets smaller and divides itself into many branches as we moves up. Further, on each branch there are many leaves on it. We can consider the main trunk of the tree as the main value of the variable, branches as fragments of the value of the variable, and leaves as the further smaller fragments of the variable where the data can be extracted or changed easily. Similarly, we can divide the whole value into smaller fragments, then assign a new value to that particular fragment and then joining the fragments to make a new array. This can reduce a lot of human efforts and also saves a lot of memory.
The β€œMORI” and β€œIMMUTABLE.JS” Libraries works in the same manner as describes above. It breaks data into fragments, changes a particular fragment data to a new value and then joining the fragments to form a new data so that the actual value of the parent variable remains same and a new value is assigned to another variable using the parent variable.

1_N9vPzle0z9sj0tp5nd6bbQ

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›