Immutability, and how to do it in JavaScripts

Immutability
And how I do it in JavaScripts

Shameless self-promotion
CrossHub Chrome Extension
Go to Declaration and “Find Usages” for TypeScript

projects on Github
textik.com
ASCII diagrams drawer

I’m not going to talk about

let vs const vs var
const is for
immutable
bindings
const foo = 1;
foo = 2; // nope
const someObject = {};
someObject["foo"] = "bar"; // yup

It’s an object, that cannot be modiﬁed after it’s creation
Immutable Object

Who cares!

¯_(ツ)_/¯
Very useful in multithreaded
environments

When you’re sure nothing will change this object, it helps
making assumptions about the code
Still helps reasoning about the code
function main() {
const foo = new Foo();
const bar = calculateBar(foo);
// You know that `calculateBar` would never
// change internals of foo
}

Performance is better
Caching is simpler, you can cache more
class SomeClass {
get someSeriousNumber() {
if (this._someSeriousNumber == null) {
this._someSeriousNumber = this.heavyCalculation();
}
return this._someSeriousNumber;
}
}

Reusable parts of nested existing objects
make it fast and memory eﬃcient to clone
{
project: {
pages: [
{id: 1, page_items: [{type: "sticker", bounds: [1,1,3,4]}]},
]
}
}

Reusable parts of nested existing objects
make it fast and memory eﬃcient to clone
{
project: {
pages: [
]
}
}

Equality is faster
foo.hashCode();
// => 3247253721
foo.hashCode() === bar.hashCode();
// if false - they are not equal
// if true - ¯_(ツ)_/¯

Equality is faster
1 function equals(a, b) {
2 if (a === b) {
3 return true;
4 } else if (a != null) {
5 if (isHashable(a) && isHashable(b) && a.hashCode() !== b.hashCode()) {
6 return false;
7 } else if (isEquatable(a)) {
8 return a.equals(b);
9 } else if (a instanceof Array && b instanceof Array) {
10 return areArraysEqual(a, b);
11 } else if (a instanceof Map && b instanceof Map) {
12 return areMapsEqual(a, b);
13 } else if (a instanceof Set && b instanceof Set) {
14 return areSetsEqual(a, b);
15 } else if (isPlainObject(a) && isPlainObject(b)) {
16 return arePlainObjectsEqual(a, b);
17 } else {
18 return _.isEqual(a, b);
19 }
20 } else {
21 return _.isEqual(a, b);
22 }
23 }

You can control the level of uniqueness of your hashcodes
Usually you recursively go through all
the children of an object to calculate a
hash code
Sometimes you could just use some
model id
Equality is faster

Object.freeze
How to make an
immutable object?
1 const obj = Object.freeze({a: "1"});
2 obj.a = "8";
3 obj.a;
4 // => 1
5 // => or throws, if in strict mode

Value Object
1 class Entity {
2 constructor(data) {
3 this._data = Object.freeze(data);
4 }
5
6 update(data) {
7 const newData = {...this._data, ...data};
8 return new this.constructor(newData);
9 }
10
11 equals(other) {
12 if (other instanceof this.constructor) {
13 return equals(this._data, other._data);
14 } else {
15 return false;
16 }
17 }
18
19 hashCode() {
20 if (this._hashCode == null) {
21 this._hashCode = hash(this._data);
22 }
23 return this._hashCode;
24 }
25 }
26
const foo = new Foo({a: 1});
const foo2 = new Foo({a: 1});
foo === foo2;
// false => equality by identity
foo.equals(foo2);
// true => equality by value

Value Object
1 class Entity {
2 constructor(data) {
3 this._data = Object.freeze(data);
4 }
5
6 update(data) {
7 const newData = {...this._data, ...data};
8 return new this.constructor(newData);
9 }
10
11 equals(other) {
12 if (other instanceof this.constructor) {
13 return equals(this._data, other._data);
14 } else {
15 return false;
16 }
17 }
18
19 hashCode() {
20 if (this._hashCode == null) {
21 this._hashCode = hash(this._data);
22 }
23 return this._hashCode;
24 }
25 }
26
1 class Email extends Entity {
2 get from() {
3 return this._data.from;
4 }
5
6 get to() {
7 return this._data.to;
8 }
9
10 get subject() {
11 return this._data.subject;
12 }
13 }
14
15 const email = new Email({
16 from: "anton.astashov@gmail.com",
17 to: "tcook@apple.com",
18 subject: "New Macbook Pro feedback"
19 });
20
21 const email2 = email.update({
22 from: "jive@apple.com"
23 })
24
25 console.log(email.equals(email2));
26 // => false

There’s Record in Immutable JS

Though `equals` there doesn’t use hash codes

unless you already have them calculated and cached.
Value Object
1 class ABClass extends Record({a: 1, b: 2}) {
2 constructor(...rest) {
3 super(...rest);
4 this.hashCode();
5 }
6 // ...
7 }

Collection
Most objects in an application
Value Object
or

Collections
Implement Persistent
Data Structures
Just build immutable interface, but use
regular mutable collections under the hood

Very eﬃcient updates, inserts and deletions
Persistent Data Structures

Very eﬃcient updates, inserts and deletions
80 elements - only 3 nodes to recreate,

33 refs to recreate.
1000000 elements - 5 nodes to recreate

81 refs to recreate

Usually used parent-to-child ratio of 16
Even on very big collections (billions of
records), updating is only ~10-20x times
slower than updating a mutable
collection
Memory eﬃcient

Mori Immutable JS

• Global state is a huge Immutable.JS object

• Very fast checks for changes in subtree
allows to write super-fast
shouldComponentUpdate checks
It plays especially
nice with Redux

Caveats
Some algorithms are harder to implement in immutable
data structures
Sometimes the performance of updates is actually
a show stopper

Immutable.JS oﬀers a shortcut - withMutations()
const list = List.of(1, 2, 3);
const list2 = list.withMutations(mutableList => {
mutableList.push(4);
mutableList.push(5);
});

Updates are harder
{project: {
name: "Project",
pages: [{
author: "Me",
posts: [{
content: "Content"
}]
}]
}}
1 // Mutable approach
2 project.pages[0].posts[0].content = "New one";
1 // Naive approach
2 const newPosts = project
3 .get("pages").get(0).get("posts")
4 .update(0, () => Immutable.Map({content: "New one"}));
5 const newPages = project
6 .get("pages")
7 .update(0, (v) => v.set("posts", newPosts);
8 const newProject = project.set("pages", newPages);
1 // Using updateIn - not type safe approach
2 const newProject = project.updateIn(
3 ["project", "pages", 0, "posts", 0, "content"],
4 () => "New one"
5 );
1 // Typesafe and flexible, but verbose approach
2 const newProject = pagesLens(0)
3 .then(postsLens(0))
4 .modify(
5 projects,
6 (oldValue) => oldValue.update({content: "New one"}));

Using wrong reference
Piping:
function main() {
let result = "hello"
|> doubleSay
|> capitalize
|> exclaim;
// => "Hello, hello!"
}
1 function main() {
2 const result = "hello";
3 const result2 = capitalize(result);
4 const result3 = doubleSay(result);
5 const result4 = exclaim(result3);
6 // => "hello, hello!"
7 }

Using wrong reference
1 class Page {
2 // ...
3 doStuff() {
4 let post = this.posts.get(0);
5 post = post.update({content: "New content"});
6 const author = this.postsToAuthors.get(post);
7 notifyAuthor(author);
8 // author is null, because it's totally different post now
9 return post;
10 }
11 }
12

I think it’d be cool, if JS’ Array, Map and Set
would be persistent collections
I still use immutable objects
by default in my projects
Never gonna happen tho

Immutability, and how to do it in JavaScripts

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Immutability, and how to do it in JavaScripts

Similar to Immutability, and how to do it in JavaScripts (20)

Recently uploaded

Recently uploaded (20)

Immutability, and how to do it in JavaScripts