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 ]
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;
}
}
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
Thank Steve + Yolk
Introduce myself. Graduated in 2002, been developing for 15 years.
Today I will give an overview about what immutable data structures are
what functional programming is and how immutable.js can help you to write pure functions in javascript efficiently
Some people will be thinking less than 4 years, some will think that he will see out the term. There may be some that think 8 years.
Forever… the next one will be the 46th
Does anyone think more than 8 years?
I wanted to think about what immutable objects there are in the real world. Ask the audience for their ideas
Prohibition is 18th Amendment, 21st Amendment repeal
If we are concerned with truthfulness, then it is a good idea to use an immutable object
This is just very normal to us
This shows an inconsistency, which could cause bugs
At the point in time that we are performing the push operation we don’t know what a actually is. Something else could have messed with it
Objects are usually made up of identity, internal state and behaviour
The problem is that in object-orientation you usually don't create data-structures. You encapsulate and hide data instead. Data-access is often even viewed as bad
We often think about objects in the present
All well and good but what’s so great about this…
Something that I’m new to. I’ve had my brain wired for Object-orientated programming for 15 years.
It’s a bit hipster - Lisp was invented in 1958
Until recently has been seen as something for mathematicians - not part of the enterprise world. Parts can get really hard - e.g. Monads
This is changing because:
Current popularity due to massively parallel systems. Fixing problems with state management
Due to Javascript not being purely functional - it is a great introduction to FP. Some lousy things go away like ‘this’
Functional programming at its core is is thinking of functions as king rather than objects. Data is transformed through functions which can be composed together to make an application
With functional programming, for a given input it will return a consistent output
Truth
Higher-order function
Snazzy ES-6 notation
The console is not part of the function
When dealing with objects and arrays there is a danger of unintended impurity
Immutablity is not a magic bullet, but used well, they can be used to improve the performance of applications
Maybe key presses don’t change the DOM. Maybe this is a webmail client and it is polling the network
Copying is simply a matter of creating a new reference to the existing piece of data
With immutable objects you only create a new object if the object has changed. This is comparing two references and couldn’t be much cheaper and easier.
Copying is simply a matter of creating a new reference to the existing piece of data
However this can be further optimised thanks to a feature of immutable.js…
People can’t let go of the idea that you are creating masses of data
You can see from this how an undo feature is really easy. We just somehow go back to the memory address 0x0012
Immutable objects can be a beneficial tool in your programming arsenal
Reach for them when you care about the truthfulness of state