Functional programming with Immutable .JS

FUNCTIONAL
PROGRAMMING
WITH IMMUTABLE.JS
DAVID WILDE

THE 45TH
PRESIDENT
BUT FOR
HOW
LONG?

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

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

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

let a = 1
let b = 2
let c = a + b // a: 1, b: 2, c: 3
let a = “foo”
let b = “bar”
let c = a + b

let a = 1
let b = 2
let c = a + b // a: 1, b: 2, c: 3
let a = “foo”
let b = “bar”
let c = a + b // a: “foo”, b: “bar”, c: “foobar”

▸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)

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)

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 ]

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

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 {
...

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 ]

FUNCTIONS VS CLASSES
▸Functions do specific things
▸Classes are specific things
f(x)

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]

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]

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

PURE FUNCTIONS
const hello = (person) => (
“Hello, “ + person.name
);
console.log(hello({name: “David”}));

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)

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)

PERFORMANCE
ENHANCEMENTS
USING IMMUTABLE
DATA STRUCTURES

DRAW DOM
BASED ON THE
STATE
STATE
OBJECT
SOME
INPUT

DRAW DOM
BASED ON
THE STATE
STATE
OBJECT
SOME
INPUT
CLONED
OBJECT
COMPARE
STATE VS
CLONE
Same Differ

COMPARING TWO OBJECTS IN JAVASCRIPT

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;
}
}

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

PERSISTENT DATA STRUCTURES
1
List.of([ 1, 2, 3, 5, 8 ]).push(13)
2 3 50x0012 8

PERSISTENT DATA STRUCTURES
1 2 3 50x0012
1 2 3 50x0042 8
8
13
List.of([ 1, 2, 3, 5, 8 ]).push(13)

STRUCTURAL SHARING
2
3 5
0x0012
1
8
List.of([ 1, 2, 3, 5, 8 ]).push(13)

STRUCTURAL SHARING
2
3 5
0x0012
1
8
1
8
13
0x0042
List.of([ 1, 2, 3, 5, 8 ]).push(13)

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

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'

Functional programming with Immutable .JS

More Related Content

Similar to Functional programming with Immutable .JS (20)

More from Laura Steggles (9)

Recently uploaded (20)

Functional programming with Immutable .JS

Editor's Notes