Getting started with Immutable Data Structures

Posted on Jun 09, 2017

Getting started with Immutable Data Structures

Before Starting with Immutable Data Structures let’s talk about Immutability first. Immutable means something which cannot be changed over time or unchanged. Okay, that’s just meaning but how it is useful to us? To get an answer to this question let’s take a deeper look.

Let suppose we have a program of creating a vanilla cake which takes an array of ingredients, sounds interesting right?

But I wanted a chocolate cake so what I did that I changed the main ingredient which is vanilla essence with chocolate bar and I got my chocolate cake, but wait since I made changes to the ingredient array our program is no longer making a vanilla cake which is the purpose of our program, now this is a problem for me and my team members as our program is not working as we intended it to.

It happened because our array was not immutable so anything arbitrarily can change our original array and our program will break. That’s what we don’t want in real life right?

We can prevent such types of failures using Immutable Data Structures, so if anything tries to change our data array instead of changing into our original array it will create a copy of the original array and apply changes.

There are a bunch of libraries from where we can get these Data Structures out of the box and one of them is Immutable.js and we are gonna talk about this library.

What is Immutable.js?

Immutable.js is a library which provides us with collections of Data which are modelled upon JavaScript’s Array, map and set objects, but with a significant difference that is they are Immutable. So any add, delete and update operation which you will perform on these collections they will return a new collection.

Performing operations on Immutable Collections

We have seen what is immutable data, let’s see how to perform operations on these data structures and how they work.

Below is the example of operation performing on the Immutable list.

const immutable = require(‘Immutable’);
 
const ingredientsA = immutable.List.of(
  ‘Sugar’, 
  ‘flour’
);
 
const ingredientsB = ingredientsA.push(
  ‘Vanilla essence’
);
 
IngredientsA.size; // 2
 
ingredientsB.get(2); // Vanilla essence

Note that when I pushed something to the first list (ingredientsA) it created a new list for me without changing the first list.

Let’s look at some other Immutable collections.

const IngredientsList = immutable.Map({
  'a': 'Flour', 
  'b': 'Eggs'
});
 
const modifiedIngredientsList = IngredientsList.set(
  ‘c’, ’Sugar’
);
 
console.log(IngredientsList.size) // 2
 
console.log(modifiedIngredientsList.size) // 3
 
console.log(modifiedIngredientsList.get(‘c’)) // Sugar
const ingredientsA = immutable.Set([
  ‘Flour’,
  ‘Egg’,
  ‘Baking Powder’
]);
 
const ingredientsB = immutable.Set([
  ‘Vanilla essence’,
  ‘Milk’
]); 

const compIngredients = ingredientsA.union(ingredientsB);
 
console.log(compIngredients.size); // 5

console.log(compIngredients.has(‘Milk’)); // True

Immutable.js is a very big and powerful library and these are some basic examples to introduce you to Immutable collections, for complete reference please refer their docs, there are other collections and other useful methods from which you can get benefits.

Lastly, I would like to add Immutability is very much required when you are working with functional programming where your functions are just data transformers and you don’t want your functions to change your input data unnecessarily and you know that it can be a problem right?

I hope this blog might help you to get started with Immutable Data Structures and please let me know your feedback.