Immutability – Pivotal role in Javascript

Immutability is an implementation technique; means once a value is created it cannot be altered.

In this post I’m trying to explain how immutability plays vital role in Javascript.

Strings and numbers are immutable in JavaScript. It cannot be altered, but can make new values out of it.

Consider the following example, the value of “foo” variable is not getting changed on “concat”.

But let's consider arrays and objects in Javascript, which are mutable.

In the below example obj1 is getting updated when we add new properties to obj2, because both objects share the same reference, not the value.

When we think about the immutability, the first thing that comes into our mind is persistent data structures, which are immutable.

Operations in such data structures do not visibly change the existing structure of the data, instead it always creates a new structure. Regardless of the type of persistence (partial or full) these data structures are quite a common paradigm in functional programming.

A simple example of persistent data structure is “singly linked list”; a simple list of objects carrying a reference to the next in the list.

 How can we achieve the same in Javascript?

Javascript doesn't have immutable data types (lists, maps). Implementation of persistent data structure is very much required in Javascript as we are handling large amount of data on the web-based applications. From the performance and memory management standpoint implementing immutability in Javascript is highly recommended.

Let's consider below example-

Since the objects are mutable, changes in “tempData” reflects in “data”. The reason is that they share common reference to the data.

As we know there is no immutable map or list in native Javascript, we may need to depend on third party libraries.

Immutable.js from Facebook developers is one of that. It provides persistent Immutable List, Stack, Map, OrderedMap, Set, OrderedSet and Record. They have implemented “Structural sharing” via hash array mapped tries and vector tries.

Let's rewrite the above example with Immutable Map-

In this “tempData” gets a new copy of the data object, it’s passed as a value not as a reference. But “tempData” and “data” share same structure. There is no change happened to the “data” Map, it is unaltered.

Immutable-JS built on 3 main properties -

• Immutable
• Persistent
• Structural sharing

Performance and memory utilization?

I’m sure you might think about the performance impact and memory utilization in implementing an immutable data structure, as it always creates a copy of existing objects and add new properties or values to it.

Rest assured that you will be amazed how applications like Facebook, Netflix has leveraged the benefits of immutability and persistent data structure for building their components.

ReactJS from Facebook developers follows Immutable design pattern, and it’s virtual DOM creation logic is based on persistent data structure.

Conclusion

I hope this post helped you to trigger a thought process about Immutability. I couldn’t go in-depth about its implementation, but just wanted to convey that immutability plays pivotal role in writing Javascript more efficiently.

 Please let me know your feedback..