Presentation given by David Wilde at Yolk Recruitment's IT Contractor event on 18th May.

1. FUNCTIONAL
PROGRAMMING
WITH IMMUTABLE.JS
DAVID WILDE

2. THE 45TH
PRESIDENT
BUT FOR
HOW
LONG?

4. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY VS MUTABILITY
▸Mutable means ‘capable of changing’
▸Immutable means ‘cannot change’
▸Strings are immutable in most programming languages
▸Objects are mutable in JavaScript

5. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABLE OBJECTS IN THE
REAL WORLD
▸ Newspapers
▸ Accountancy Book-keeping
▸ Constitutions/Contracts
▸ Audits
▸ Facts presenting the state of
something at a given time

6. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY IN CODE
▸Javascript numbers are immutable
let a = 1
let b = 2
let c = a + b
▸Strings are immutable
let a = “foo”
let b = “bar”
let c = a + b

7. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY IN CODE
▸Javascript numbers are immutable
let a = 1
let b = 2
let c = a + b // a: 1, b: 2, c: 3
▸Strings are immutable
let a = “foo”
let b = “bar”
let c = a + b

8. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY IN CODE
▸Javascript numbers are immutable
let a = 1
let b = 2
let c = a + b // a: 1, b: 2, c: 3
▸Strings are immutable
let a = “foo”
let b = “bar”
let c = a + b // a: “foo”, b: “bar”, c: “foobar”

9. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY IN CODE
▸Some array methods are immutable
let a = [ 1, 2 ]
let b = [ 3, 4 ]
let c = a.concat(b)
▸Others are not
let a = [ 1, 2, 5 ]
let b = a.push(8)

10. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY IN CODE
▸Some array methods are immutable
let a = [ 1, 2 ]
let b = [ 3, 4 ]
let c = a.concat(b) // a: [ 1, 2 ]
// b: [ 3, 4 ]
// c: [ 1, 2, 3, 4 ]
▸Others are not
let a = [ 1, 2, 5 ]
let b = a.push(8)

11. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY IN CODE
▸Some array methods are immutable
let a = [ 1, 2 ]
let b = [ 3, 4 ]
let c = a.concat(b) // a: [ 1, 2 ]
// b: [ 3, 4 ]
// c: [ 1, 2, 3, 4 ]
▸Others are not
let a = [ 1, 2, 5 ]
let b = a.push(8) // a: [ 1, 2, 5, 8 ]

12. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABILITY IN CODE
▸Some array methods are immutable
let a = [ 1, 2 ]
let b = [ 3, 4 ]
let c = a.concat(b) // a: [ 1, 2 ]
// b: [ 3, 4 ]
// c: [ 1, 2, 3, 4 ]
▸Others are not
let a = [ 1, 2, 5 ]
let b = a.push(8) // a: [ 1, 2, 5, 8 ]
// b: 4

13. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
OBJECT-ORIENTATED PROGRAMMING
TENDS TO MUTABILITYclass Kettle {
int temperature = 0;
int getTemperature() {
return this.temperature;
}
void boil() {
this.temperature = 100;
}
}
class Order {
int id;
drink[] drinks;
Order(id) {
this.id = id;
}
addDrink(drink) {
this.drinks.push(drink);
}
process() {
}
}
class Coffee extends Beverage {
...

14. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
MAKING THIS OPERATION IMMUTABLE
var list1 = Immutable.List.of(1, 2)
var list2 = list1.push(3, 4, 5)
// list1: [ 1, 2 ]
// list2: [ 1, 2, 3, 4, 5 ]

15. FUNCTIONAL
PROGRAMMING

16. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
FUNCTIONS VS CLASSES
▸Functions do specific things
▸Classes are specific things
f(x)

17. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
ARRAY MAP
a = [1, 2, 5]
function double(value) {
return value * 2;
}
function addOne(value) {
return + 1;
}
b = a.map(double).map(addOne)
// b: [3, 5, 11]

18. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
ARRAY MAP
a = [1, 2, 5]
const double = (value) => value * 2;
const addOne = (value) => value + 1;
b = a.map(double).map(addOne)
// b: [3, 5, 11]

19. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
PURE FUNCTIONS
var me = { name: “David” };
const hello = () => (
console.log(“Hello, “ + me.name)
);

20. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
PURE FUNCTIONS
const hello = (person) => (
“Hello, “ + person.name
);
console.log(hello({name: “David”}));

21. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
PURE FUNCTIONS
const myObject = {a: 1, b: 2}
const myFunc = (obj) => {
obj.a = obj.a * 2
return obj
}
const newObj = myFunc(myObject)
console.log(myObject) // {a: 2, b: 2}
console.log(newObj) // {a: 2, b: 2)

22. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
PURE FUNCTIONS
const myImmutable = Immutable.fromJS({a: 1, b: 2})
const myFunc = (obj) => {
return myImmutable.set(‘a’, myImmutable.get(‘a’) * 2)
}
const newObj = myFunc(myObject)
console.log(myObject.toJS()) // {a: 1, b: 2}
console.log(newObj.toJS()) // {a: 2, b: 2)

23. PERFORMANCE
ENHANCEMENTS
USING IMMUTABLE
DATA STRUCTURES

24. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
DRAW DOM
BASED ON THE
STATE
STATE
OBJECT
SOME
INPUT

25. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
DRAW DOM
BASED ON
THE STATE
STATE
OBJECT
SOME
INPUT
CLONED
OBJECT
COMPARE
STATE VS
CLONE
Same Differ

26. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
COMPARING TWO OBJECTS IN JAVASCRIPT

27. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
COMPARING TWO OBJECTS IN JAVASCRIPT
function compare2Objects (x, y) {
var p;
// remember that NaN === NaN returns false
// and isNaN(undefined) returns true
if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') {
return true;
}
// Compare primitives and functions.
// Check if both arguments link to the same object.
// Especially useful on the step where we compare prototypes
if (x === y) {
return true;
}
// Works in case when functions are created in constructor.
// Comparing dates is a common scenario. Another built-ins?
// We can even handle functions passed across iframes
if ((typeof x === 'function' && typeof y === 'function') ||
(x instanceof Date && y instanceof Date) ||
(x instanceof RegExp && y instanceof RegExp) ||
(x instanceof String && y instanceof String) ||
(x instanceof Number && y instanceof Number)) {
return x.toString() === y.toString();
}
// At last checking prototypes as good as we can
if (!(x instanceof Object && y instanceof Object)) {
return false;
}
if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) {
return false;
}
if (x.constructor !== y.constructor) {
return false;
}
if (x.prototype !== y.prototype) {
return false;
}
// Check for infinitive linking loops
if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) {
return false;
}
// Quick checking of one object being a subset of another.
// todo: cache the structure of arguments[0] for performance
for (p in y) {
if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
return false;
}
else if (typeof y[p] !== typeof x[p]) {
return false;
}
}
for (p in x) {
if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
return false;
}
else if (typeof y[p] !== typeof x[p]) {
return false;
}
switch (typeof (x[p])) {
case 'object':
case 'function':
leftChain.push(x);
rightChain.push(y);
if (!compare2Objects (x[p], y[p])) {
return false;
}
leftChain.pop();
rightChain.pop();
break;
default:
if (x[p] !== y[p]) {
return false;
}
break;
}
}

28. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
COMPARING TWO OBJECTS IN JAVASCRIPT

29. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
PARTICULAR PERFORMANCE
IMPROVEMENTS ARE AVAILABLE
DRAW DOM
BASED ON
THE STATE
STATE
OBJECT
SOME
INPUT
STORE
OLD REF
COMPARE
STATE REF VS
OLD REF
Same
Differ

30. STRUCTURAL
SHARING

31. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
PERSISTENT DATA STRUCTURES
1
List.of([ 1, 2, 3, 5, 8 ]).push(13)
2 3 50x0012 8

32. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
PERSISTENT DATA STRUCTURES
1 2 3 50x0012
1 2 3 50x0042 8
8
13
List.of([ 1, 2, 3, 5, 8 ]).push(13)

33. TRIE

34. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
STRUCTURAL SHARING
2
3 5
0x0012
1
8
List.of([ 1, 2, 3, 5, 8 ]).push(13)

35. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
STRUCTURAL SHARING
2
3 5
0x0012
1
8
1
8
13
0x0042
List.of([ 1, 2, 3, 5, 8 ]).push(13)

36. CONCLUSION

37. WORKSHOP
https://github.com/davidwilde/poop-sweeper

38. FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS
IMMUTABLE.JS
var map = Immutable.Map({ a: 1, b: 2, c: 3 })
map
.set('b', 50)
.get('b') // 50
var list = Immutable.List.of(1, 2)
list
.push(3, 4, 5)
.unshift(0)
.concat(list2, list3)
.get(0)
.size
var nested = Immutable.fromJS({ user: { profile: { name: 'John' } } })
nested
.mergeDeep({ user: { profile: { age: 90 } } })
.setIn([ 'user', 'profile', 'name' ], 'Jack')
.updateIn([ 'user', 'profile', 'name' ], (s) => s.toUpperCase())
.getIn(['user', 'profile', 'name']) // 'JACK'