Immutability in JavaScript


In today’s functional programming, immutability is one of the core principle that drives quality software applications. In my experience, this is immensely apparent in JavaScript, writing software applications that depend on a single source of the truth, that is a single source of an application state is very beneficial.

My fascination with the immutability subject started when I was doing some research on a prevalent state management library for Angular applications, NgRx, most of the video tutorials and blogs that I have read on NgRx first give an introduction on what immutability is, so I thought I should share with you what I have learned from great programmers out there.

This will not be an in-depth dive into the immutability subject, but more of an introduction that will get you started on the journey to understanding immutable data structures.

So, what is immutability?

When something is immutable, it means that it cannot be changed.
What is it in JavaScript’s or programming context?
It is an object that cannot be changed after it has been created, examples are:
Strings, Number etc.

In contrast, mutability is an object that can be changed after it has been created.

To demonstrate how immutability works in JavaScript, let us look into a simple example.

The same behavior applies to the Number object, for example

The evaluation of the above expression would not mutate the values of num1 and num2. But with objects and arrays we do mutate the actual value from the reference, thus objects and arrays are mutable objects in JavaScript

Let’s look at an example to demonstrate this.

Because anotherObject was given a reference to the actual object in memory changing mutableObject will change the value in anotherObject, setting mutableObject to null will remove mutableObject as a reference to the actual object but anotherObject will keep that reference.

The same behavior applies to arrays

This behavior of mutable objects can cause detrimental issues in any small or large app that depends on a state, we need the state to be consistent and up to date. How do we achieve this? Well… you can use JavaScript’s own functions, for example, to keep the state of your app immutable, you can use the Object.assign function to create a copy of your state, perform some actions on the copy and merge it back to the original state object, since an app’s state is nothing but a enormous object that stores data about different domains of you app, for example, a property of router which has a value of an object that will store some artifacts about your app’s routing state. Note that object assing is part of ES6 thus some older browser does not support this function, you will need some library helper that implements it, a polyfill or a Babel plugin.

Another method you can use to make the app’s state object immutable is by using the Object.freeze, freezing an object will cause the object to be immutable, meaning you cannot change its property descriptors, remove properties, add new properties, change property values etc.

Managing an apps state manually can be daunting if there are many facets of your application’s state that you will need to consider, there are libraries out there that makes state management a breeze, just to name a few, there is MobX mostly used with ReactJS applications, NgRx used with Angular, there is ImmutableJS and Mori used with just vanilla JS apps, these are some of the mostly used state management libraries, you can explore the internet, I am sure there are plenty other solutions that would fit your needs.

There you have it folks! hope this will be helpful to someone out there. Any corrections suggestions or additions to this topic are more than welcome.