Immutable.js is a library that provides immutable collections for JavaScript, inspired by clojure[script] immutable data structures. It has been developed by Facebook.

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.

The purpose of this article is to demonstrate the power of interactive code snippets in the browser. For that purpose, we are going to play a bit with immutable.js, like kids in a playground sandbox.

Playing with Immutable.js

First, let’s load immutable.js in the browser with the help of the klipse plugin:

xxxxxxxxxx

Immutable

Object {

  "Collection": [Function Collection],

  "Iterable": [Function Iterable],

  "List": [Function List],

  "Map": [Function Map],

  "OrderedMap": [Function OrderedMap],

  "OrderedSet": [Function OrderedSet],

  "Range": [Function Range],

  "Record": [Function Record],

  "Repeat": [Function Repeat],

  "Seq": [Function Seq],

  "Set": [Function Set],

  "Stack": [Function Stack],

  "fromJS": [Function fromJS],

  "is": [Function is],

}

Now, we can play with the immutable.js library.

All the code snippets of this article are live and interactive. Simply modify the code, wait for 2 seconds and see the results…

Let’s start by creating an immutable map. A map is basically an object consisting of key-value pairs. Let’s create, a person with name and phone attributes:

xxxxxxxxxx

person = Immutable.Map({ 

  name: 'John', 

  phone: '12345678'

});

xxxxxxxxxx

Object {

  "name": "John",

  "phone": "12345678",

}

Now, let’s modify the phone:

xxxxxxxxxx

changePhone = function( person, newPhone ) {

  return person.set( 'phone', newPhone );

};

​

person2 = changePhone( person, '87654321' );

xxxxxxxxxx

Object {

  "name": "John",

  "phone": "87654321",

}

The changePhone function returns a new immutable map: When changePhone is executed, person2 is created as a return value.

The phone numbers of each person map can be accessed via the get method. The properties of the maps are hidden behind the get and set interface, therefore they cannot be directly accessed or modified.

xxxxxxxxxx

[person.get('phone'), person2.get( 'phone' )]

xxxxxxxxxx

Array [

  "12345678",

  "87654321",

]

Equality vs. Identity

Now let’s see what happens if we change phone of person2 back to the phone of person:

xxxxxxxxxx

person3 = changePhone( person2, '12345678' );

​

person3 == person

xxxxxxxxxx

false

person3 and person are not the same.

But from an value perspective, they are equal:

xxxxxxxxxx

person3.equals( person )

xxxxxxxxxx

true

The immutable abstraction is intelligent enough to detect when an attribute is changed to the same value as before. In the following case, the new person is identical to the old one: both == and === comparisons return true.

xxxxxxxxxx

changePhone( person, '12345678' ) == person

xxxxxxxxxx

true

xxxxxxxxxx

changePhone( person, '12345678' ) === person

xxxxxxxxxx

true

Read more about immutable.js…

Tell us what you think about the interactive code snippets of this article in the comments below.