CodeMash: Functional Programming Basics in ES6

1.

FUNCTIONAL PROGRAMMING Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo / jfairbank BASICS IN
ES6

2.

We help brands excel. pushagency.io Your website, SimplyBuilt. simplybuilt.com

3.

Redux

4.

¯\_(ϑ)_/¯ WHAT IS FUNCTIONAL PROGRAMMING?

5.

¯\_(ϑ)_/¯ WHY FUNCTIONAL PROGRAMMING?

6.

None

7.

Domain to Range

8.

None

9.

None

10.

Domain Range

11.

CALCULUS

12.

PRINCIPLES

13.

PURE & DECLARATIVE PREDICTABLE

14.

IMMUTABLE STATE SAFE

15.

FIRST CLASS STATE TRANSPARENT

16.

COMPOSABLE FIRST CLASS CLOSURES MODULAR

17.

ES2015 (ES6)

18.

All good let age = 28; age = 29; const
name = 'Jeremy'; name = 'Jet'; Syntax error

19.

const add = (x, y) => { return x +
y; }; const identity = x => x;

20.

const add = (x, y) => { return x +
y; }; const identity = x => x;

21.

const array = (...elements) => { return elements; }; array(1,
2, 3); // [1, 2, 3] const log = (...args) => { console.log(...args); }; log('hello', 'codemash'); // hello codemash

22.

const array = (...elements) => { return elements; }; array(1,
2, 3); // [1, 2, 3] const log = (...args) => { console.log(...args); }; log('hello', 'codemash'); // hello codemash

23.

const langs = ['JavaScript', 'Ruby', 'Haskell']; const [js, ...rest] =
langs; js === 'JavaScript'; rest[0] === 'Ruby'; rest[1] === 'Haskell'; const head = ([x]) => x; head([1, 2, 3]) === 1;

24.

const langs = ['JavaScript', 'Ruby', 'Haskell']; const [js, ...rest] =
langs; js === 'JavaScript'; rest[0] === 'Ruby'; rest[1] === 'Haskell'; const head = ([x]) => x; head([1, 2, 3]) === 1;

25.

const greet = (name, greeting = 'Hi') => { console.log(greeting,
name); }; greet('Codemash', 'Hello'); // Hello Codemash greet('Sandusky'); // Hi Sandusky

26.

class Point { constructor(x, y) { this.x = x; this.y
= y; } moveBy(dx, dy) { this.x += dx; this.y += dy; } } function Point(x, y) { this.x = x; this.y = y; } Point.prototype.moveBy = function(dx, dy) { this.x += dx; this.y += dy; };

27.

PURE

28.

const add = (x, y) => x + y; add(2,
3) === 5; add(2, 3) === 5; add(2, 3) === 5;

29.

const add = (x, y) => x + y; add(2,
3) === 5; add(2, 3) === 5; add(2, 3) === 5; Referentially transparent

30.

× let name = 'Jeremy'; const getName = () =>
name; const setName = (newName) => { name = newName; }; const printUpperName = () => { console.log(name.toUpperCase()); };

31.

describe('api', () => { beforeEach(() => mockConsoleLog()); afterEach(() => restoreConsoleLog());
it('sets and prints the name', () => { printUpperName(); expect(console.log).calledWith('JEREMY'); n.setName('Jet'); printUpperName(); expect(console.log).calledWith('JET'); }); }); ×

32.

HIDDEN STATE IS UNCERTAIN STATE

33.

const upperName = (name) => name.toUpperCase(); describe('api', () => {
it('returns an uppercase name', () => { expect(upperName('Jeremy')).to.equal('JEREMY'); expect(upperName('Jet')).to.equal('JET'); }); }); ✓

34.

HOW TO ACHIEVE THE RESULT IMPERATIVE

35.

function doubleNumbers(numbers) { const doubled = []; const l =
numbers.length; for (let i = 0; i < l; i++) { doubled.push(numbers[i] * 2); } return doubled; } doubleNumbers([1, 2, 3]); // [2, 4, 6]

36.

DECLARE WHAT THE DESIRED RESULT IS DECLARATIVE

37.

function doubleNumbers(numbers) { return numbers.map(n => n * 2); }
doubleNumbers([1, 2, 3]); // [2, 4, 6]

38.

1 2 3 numbers.map(n => n * 2) 2 4
6 Domain Range

39.

CREATE STATE, DON’T MUTATE IT IMMUTABLE

40.

const hobbies = [ 'programming', 'reading', 'music' ]; const firstTwo
= hobbies.splice(0, 2); console.log(firstTwo); // ['programming', 'reading'] console.log(hobbies); // ['music']

41.

const hobbies = [ 'programming', 'reading', 'music' ]; const firstTwo
= hobbies.splice(0, 2); console.log(firstTwo); // ['programming', 'reading'] console.log(hobbies); // ['music'] Slight typo + mutability

42.

Object.freeze Immutable.js

43.

const hobbies = Object.freeze([ 'programming', 'reading', 'music' ]); const firstTwo
= hobbies.splice(0, 2); // TypeError

44.

FREE YOUR STATE

45.

class Point { constructor(x, y) { this.x = x; this.y
= y; } moveBy(dx, dy) { this.x += dx; this.y += dy; } } const point = new Point(0, 0); point.moveBy(5, 5); point.moveBy(-2, 2); console.log([point.x, point.y]); // [3, 7] ×

46.

const createPoint = (x, y) => Object.freeze([x, y]); const movePointBy
= ([x, y], dx, dy) => { return Object.freeze([x + dx, y + dy]); }; let point = createPoint(0, 0); point = movePointBy(point, 5, 5); point = movePointBy(point, -2, 2); console.log(point); // [3, 7] ✓ (*or object-oriented without mutation)

47.

PROS SAFETY FREE UNDO/REDO LOGS — REDUX EXPLICIT FLOW OF
DATA LESS MEMORY USAGE* CONCURRENCY SAFETY* *In certain cases

48.

CONS VERBOSE MORE OBJECT CREATION* MORE GARBAGE COLLECTION* MORE MEMORY
USAGE* *Alleviated with libs like Immutable.js

49.

FIRST CLASS FUNCTIONS

50.

const multiply = (x, y) => x * y; function
add(x, y) { return x + y; } const addAlias = add; const evens = [1, 2, 3].map(n => n * 2);

51.


52.


53.


54.

ENCAPSULATION CLOSURES

55.

const createAdder = (x) => { return (y) => x
+ y; }; const add3 = createAdder(3); add3(2) === 5; add3(3) === 6;

56.

+ y; }; const add3 = createAdder(3); add3(2) === 5; add3(3) === 6;

57.

const request = (options) => { return fetch(options.url, options) .then(resp
=> resp.json()); }; const usersPromise = request({ url: '/users', headers: { 'X-Custom': 'mykey' } }); const tasksPromise = request({ url: '/tasks', headers: { 'X-Custom': 'mykey' } });

58.

const request = (options) => { return fetch(options.url, options) .then(resp
=> resp.json()); }; const usersPromise = request({ url: '/users', headers: { 'X-Custom': 'mykey' } }); const tasksPromise = request({ url: '/tasks', headers: { 'X-Custom': 'mykey' } }); Repetitive

59.

const createRequester = (options) => { return (otherOptions) => {
return request(Object.assign( {}, options, otherOptions )); }; }; const customRequest = createRequester({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });

60.

const createRequester = (options) => { return (otherOptions) => {
return request(Object.assign( {}, options, otherOptions )); }; }; const customRequest = createRequester({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });

61.

FOUNDATION FOR HIGHER ORDER PATTERNS FIRST CLASS CLOSURES

62.

PARTIAL APPLICATION

63.

+ y; }; const createRequester = (options) => { return (otherOptions) => { return request(Object.assign( {}, options, otherOptions )); }; }; RECALL

64.

const add = (x, y) => x + y; const
add3 = partial(add, 3); add3(2) === 5;

65.

const request = (defaults, options) => { options = Object.assign({},
defaults, options); return fetch(options.url, options) .then(resp => resp.json()); }; const customRequest = partial(request, { headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });

66.

const partialFromBind = (fn, ...args) => { return fn.bind(null, ...args);
}; const partial = (fn, ...args) => { return (...otherArgs) => { return fn(...args, ...otherArgs) }; };

67.


68.


69.


70.


71.


72.

CURRYING

73.

const add3 = add(3); add3(2) === 5; const customRequest =
request({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });

74.

const add3 = add(3); add3(2) === 5; const customRequest =
request({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });

75.

const add = x => y => x + y;
function add(x) { return function(y) { return x + y; }; }

76.


77.


78.

const request = defaults => options => { return request(Object.assign(
{}, defaults, options )); };

79.

const request = defaults => options => { return request(Object.assign(
{}, defaults, options )); };

80.

PIECING IT TOGETHER

81.

const map = fn => array => array.map(fn); const multiply
= x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));

82.


83.


84.


85.


86.


87.


88.

customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax)); [ { price:
5 }, { price: 10 }, { price: 3 } ]

89.

[ { price: 5 }, { price: 10 }, {
price: 3 } ] map(pluck('price')) [ 5, 10, 3 ] item.price

90.

[ 5, 10, 3 ] map(discount) [ 4.9, 9.8, 2.94
] price * 0.98

91.

[ 5.35, 10.71, 3.21 ] map(tax) [ 4.9, 9.8, 2.94
] price * 1.0925

92.

COMPOSING CLOSURES

93.

None

94.

const processWord = compose(hyphenate, reverse, toUpperCase); const words = [
'hello', 'functional', 'programming' ]; const newWords = words.map(processWord); console.log(newWords); // ['OL-LEH, 'LANOI-TCNUF', 'GNIMM-ARGORP']

95.

const processWord = compose(hyphenate, reverse, toUpperCase); const words = [
'hello', 'functional', 'programming' ]; const newWords = words.map(processWord); console.log(newWords); // ['OL-LEH, 'LANOI-TCNUF', 'GNIMM-ARGORP']

96.

const processWord = compose(hyphenate, reverse, toUpperCase); const processWordExplicit = (word)
=> { return hyphenate(reverse(toUpperCase(word))); };

97.

customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax)); RETURNING TO PRICES
EXAMPLE

98.

customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax)); Triple iteration RETURNING
TO PRICES EXAMPLE

99.

customRequest({ url: '/cart/items' }) .then(map( compose( tax, discount, pluck('price') )
)); Single iteration

100.

const compose = (...fns) => (...args) => { if (fns.length
=== 0) { return args[0]; } const last = fns[fns.length - 1]; const rest = fns.slice(0, -1); return rest.reduceRight((memo, fn) => { return fn(memo); }, last(...args)); };

101.


102.


103.


104.

RECURSION SOLVE A PROBLEM IN TERMS OF ITSELF

105.

FACTORIAL

106.

const factorial = (n) => { let result = 1;
while (n > 1) { result *= n; n--; } return result; };

107.

const factorial = (n) => { if (n < 2)
{ return 1; } return n * factorial(n - 1); };

108.

{ return 1; } return n * factorial(n - 1); }; Recursive call

109.

{ return 1; } return n * factorial(n - 1); }; Base case

110.

factorial(4);

111.

factorial(4); 4 * factorial(3);

112.

factorial(4); 4 * factorial(3); 4 * 3 * factorial(2);

113.

factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4
* 3 * 2 * factorial(1);

114.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1;

115.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2;

116.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6;

117.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24;

118.

STEPS Find the recurrence  (n × n-1 × n-2 ×
… 1)  Find the base case  (n < 2)

119.

PERFORMANCE RECURSION

120.

const value = factorial(100000); console.log(value); // ??? WHAT IS THE
RESULT?

121.

const value = factorial(100000); console.log(value); // ??? WHAT IS THE
RESULT? RangeError: Maximum call stack size exceeded

122.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> Call Stack

123.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) Call Stack

124.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) Call Stack

125.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) factorial(2) Call Stack

126.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) factorial(2) factorial(1) Call Stack

127.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) factorial(2) Call Stack

128.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) Call Stack

129.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) Call Stack

130.

* 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> Call Stack

131.

const value = factorial(100000); console.log(value); // ??? 100,000 calls =
100,000 stack frames 1 stack frame ≈ 48B Max stack usage ≈ 1MB 100,000 x 48 / 1024 / 1024 = 4.58MB > 1MB

132.

IN ES2015! TAIL CALL OPTIMIZATION

133.

{ return 1; } return n * factorial(n - 1); }; UNOPTIMIZABLE

134.

{ return 1; } return n * factorial(n - 1); }; 1 UNOPTIMIZABLE

135.

{ return 1; } return n * factorial(n - 1); }; 1 UNOPTIMIZABLE 2

136.

{ return 1; } return n * factorial(n - 1); }; 1 UNOPTIMIZABLE 2 3

137.

const factorial = (n, accum = 1) => { if
(n < 2) { return accum; } return factorial(n - 1, n * accum); }; OPTIMIZED

138.


139.


140.


141.

OPTIMIZED const factorial = (n, accum = 1) => {
if (n < 2) { return accum; } return factorial(n - 1, n * accum); }; 1

142.

if (n < 2) { return accum; } return factorial(n - 1, n * accum); }; 1 2

143.

if (n < 2) { return accum; } return factorial(n - 1, n * accum); }; 1 2 3

144.

const value = factorial(100000); console.log(value); // Infinity

145.

factorial(4 /*, 1 */); factorial(3, 4); factorial(2, 12); factorial(1, 24);
24; <main> Call Stack

146.

24; <main> factorial(4, 1) Call Stack

147.


148.


149.


150.

24; <main> Call Stack

151.

RECAP PREDICTABLE SAFE TRANSPARENT MODULAR

152.

RESOURCES

153.

drboolean.gitbooks.io/mostly-adequate-guide Brian Lonsdorf

154.

ES6/7/LATER babeljs.io

155.

LANGUAGES Elm (elm-lang.org) Clojurescript (github.com/clojure/clojurescript) Purescript (purescript.org)

156.

LIBRARIES Lodash (lodash.com) Ramda (ramdajs.com) Rx (reactivex.io) Bacon.js (baconjs.github.io) Immutable.js
(facebook.github.io/immutable-js)

157.

“MV*” React (facebook.github.io/react) Redux (redux.js.org)

158.

THANKS! Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo / jfairbank Code: github.com/jfairbank/fp-basics-in-es6 Slides:
bit.ly/1OR20R7

CodeMash: Functional Programming Basics in ES6

CodeMash: Functional Programming Basics in ES6

Want more?

Transcript