Using Immutable Data Structures In Javascript with Immutable.js

Use-Cases of this Tutorial

  • You are looking for a Javascript library to work with immutable data.

While building complex applications, role of immutable data structures become important. Immutable data structures once created, are "frozen" — their values do not change.

For example if we were to use a simple array in Javascript, we can always change value of any of its elements. The original array can easily be modified. But it is was an immutable array and value of an element was changed, we would get a new array as return and the original array would be the same as before.

Native Javascript does not have special data types to create immutable data in code. We can try to create our own immutable data structures, but that would be complex and no guarantees on performance.

Immutable.js is a library for dealing with immutable data structures. With this we can create immutable arrays and objects, and perform operations on them.

Using Immutable.js

Immutable.js can either be imported as a NPM module for use in Node.js, or it can be used in browsers with a <script> tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

In Immutable.js, an object is represented by a Map, and an array is represented by a List.

// array
var list_1 = List([ 1, 2, 3 ]);

// object
var person = Map({ name: "John", age: 20 });

Operations can be performed on immutable data created — changing an element, deleting element, adding new elements ets. All these operations will return new data without modiyfing the original data.

var person = Map({ name: "John", age: 20 });

// returns new object, original object is unchanged
// { name: "John", age: 22 }
var new_person = person.set('age', 22);

Video Presentation

Here's a video on Immutable.js. It explains the need of persistent or immutable data structures and how you can them in your coding.

More Information

Immutable.js has a lot more features. Please visit the below links to know more :

Immutable Data Structures In Javascript (VIDEO)