Quick Intro to Immutable Javasript Collections

https://github.com/mackenza/immutable-demo

Demos from this session available at:

Andrew MacKenzie

Free Beer Evangelist

What is immutability?

• Immutable means unable to change once created 

• Simple datatypes in JS are immutable (like string, number, etc.)

• Collections like arrays or maps are mutable

var foo = 3;
var bar = foo;

bar += 4;
console.log(foo); // 3
console.log(bar); // 7

var foo = {name: "Fred", age: 25};
var bar = foo;

bar.age = 26;
console.log(foo); // {name: "Fred", age: 26}
console.log(bar); // {name: "Fred", age: 26}

Why is Immutability Useful?

• If you can be certain data will not change, you can make assumptions of its value
• Helps in writing "pure" functions as it prevents side-effects
• Helps debugging of certain types of bugs related to mutated data
• Eliminates the need to do "defensive copying" of objects

Immutable = Certainty

• Comparing equality of collections enables more efficient processing
• For example: state of data used in expensive operations like DOM manipulation

Caching and Performance

An Application of Immutability

• Undo/Redo history is an array of objects over time
• Undo = make the previous object state active
• Redo = make the next object state active
• Current history is maintained by an Index 

Easy to implement undo/redo in the app

0

1

2

3

mod 1

mod 2

mod3

original

[

]

Active state

History Stack

Some JavaScript Libraries with Immutable Collections

Mori - 

http://swannodette.github.io/mori/

• I found the api a bit challenging so didn't really pursue it
• Based on ClosureScript

Seamless-Immutable -

https://github.com/rtfeldman/seamless-immutable

• Very simple API - just put almost anything in the Immutable() function
• Very strict and "brittle" - throws exception on mutation (which can be useful)

Some Libraries with Immutable Collections

Immutable JS - 

http://facebook.github.io/immutable-js/

• written by Facebook engineer Lee Byron (and others)
• List (array) and Map (object) collection types
• Variations on List and Map like:
  Set, OrderedMap, Seq,  Record, Stack, and others
• Tries hard to behave like "regular JS" and to be comfortable for JS programmers
• I have only scratched the surface of the API. There are many APIs that do lots of cool things

Deep Immutability

• When I gave this session, there was a question about nested objects/arrays within immutable objects/arrays
• This is an update to show how this can be accomplished in Immutable.js
• The key is the fromJS() function which recursively creates immutable maps and lists from native JS collections

var blogPost = Immutable.fromJS({
    author: "Andrew MacKenzie",
    published: true,
    publishDate: "2015-05-15",
    contents: "The original blog post text. ",
    tags: ["general crap"]
});

newBlogPost = stack[stackIndex].set('tags', stack[stackIndex].get('tags').push(newTag));

• Then to add a new item to a nested collection you need to get() the current value, add the new value, push() in this case, and then set()