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

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

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

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

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”

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)

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)

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 ]

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

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

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 ]

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

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]

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]

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

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

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)

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)

PERFORMANCE ENHANCEMENTS USING IMMUTABLE DATA STRUCTURES

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

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

FUNCTIONAL PROGRAMMING WITH IMMUTABLE.JS COMPARING TWO OBJECTS IN JAVASCRIPT

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

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

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

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)

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

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)

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

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'

Functional programming with Immutable .JS

More Related Content

What's hot

Similar to Functional programming with Immutable .JS

More from Laura Steggles

Recently uploaded

Functional programming with Immutable .JS

Editor's Notes