CodeMash: Functional Programming Basics in ES6

Transcript

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

   View Slide

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

   View Slide

3. Redux
   

   View Slide

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

   View Slide

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

   View Slide

6. View Slide

7. Domain to Range
   

   View Slide

8. View Slide

9. View Slide

10. Domain Range
    

    View Slide

11. CALCULUS
    

    View Slide

12. PRINCIPLES
    

    View Slide

13. PURE & DECLARATIVE
    PREDICTABLE
    

    View Slide

14. IMMUTABLE STATE
    SAFE
    

    View Slide

15. FIRST CLASS STATE
    TRANSPARENT
    

    View Slide

16. COMPOSABLE FIRST
    CLASS CLOSURES
    MODULAR
    

    View Slide

17. ES2015
    (ES6)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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;
    

    View Slide

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;
    

    View Slide

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

    View Slide

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

    View Slide

27. PURE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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');
    });
    });
    ×
    

    View Slide

32. HIDDEN STATE IS
    UNCERTAIN STATE
    

    View Slide

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');
    });
    });
    ✓
    

    View Slide

34. HOW TO ACHIEVE THE
    RESULT
    IMPERATIVE
    

    View Slide

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]
    

    View Slide

36. DECLARE WHAT THE
    DESIRED RESULT IS
    DECLARATIVE
    

    View Slide

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

    View Slide

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

    View Slide

39. CREATE STATE, DON’T
    MUTATE IT
    IMMUTABLE
    

    View Slide

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

    View Slide

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

    View Slide

42. Object.freeze
    Immutable.js
    

    View Slide

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

    View Slide

44. FREE YOUR
    STATE
    

    View Slide

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]
    ×
    

    View Slide

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)
    

    View Slide

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

    View Slide

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

    View Slide

49. FIRST CLASS
    FUNCTIONS
    

    View Slide

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

    View Slide

51. 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);
    

    View Slide

52. 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);
    

    View Slide

53. 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);
    

    View Slide

54. ENCAPSULATION
    CLOSURES
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

61. FOUNDATION FOR
    HIGHER ORDER
    PATTERNS
    FIRST CLASS
    CLOSURES
    

    View Slide

62. PARTIAL
    APPLICATION
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

72. CURRYING
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

80. PIECING IT
    TOGETHER
    

    View Slide

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

    View Slide

82. 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));
    

    View Slide

83. 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));
    

    View Slide

84. 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));
    

    View Slide

85. 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));
    

    View Slide

86. 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));
    

    View Slide

87. 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));
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

92. COMPOSING
    CLOSURES
    

    View Slide

93. View Slide

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']
    

    View Slide

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']
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

101. 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));
     };
     

     View Slide

102. 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));
     };
     

     View Slide

103. 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));
     };
     

     View Slide

104. RECURSION SOLVE A PROBLEM
     IN TERMS OF ITSELF
     

     View Slide

105. FACTORIAL
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

110. factorial(4);
     

     View Slide

111. factorial(4);
     4 * factorial(3);
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

118. STEPS
     Find the recurrence

     (n × n-1 × n-2 × … 1)

     Find the base case

     (n < 2)
     

     View Slide

119. PERFORMANCE
     RECURSION
     

     View Slide

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

     View Slide

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

     View Slide

122. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     Call Stack
     

     View Slide

123. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     factorial(4)
     Call Stack
     

     View Slide

124. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     factorial(4)
     factorial(3)
     Call Stack
     

     View Slide

125. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     factorial(4)
     factorial(3)
     factorial(2)
     Call Stack
     

     View Slide

126. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     factorial(4)
     factorial(3)
     factorial(2)
     factorial(1)
     Call Stack
     

     View Slide

127. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     factorial(4)
     factorial(3)
     factorial(2)
     Call Stack
     

     View Slide

128. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     factorial(4)
     factorial(3)
     Call Stack
     

     View Slide

129. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     factorial(4)
     Call Stack
     

     View Slide

130. factorial(4);
     4 * factorial(3);
     4 * 3 * factorial(2);
     4 * 3 * 2 * factorial(1);
     4 * 3 * 2 * 1;
     4 * 3 * 2;
     4 * 6;
     24;
     
     Call Stack
     

     View Slide

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
     

     View Slide

132. IN ES2015!
     TAIL CALL
     OPTIMIZATION
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

145. factorial(4 /*, 1 */);
     factorial(3, 4);
     factorial(2, 12);
     factorial(1, 24);
     24;
     
     Call Stack
     

     View Slide

146. factorial(4 /*, 1 */);
     factorial(3, 4);
     factorial(2, 12);
     factorial(1, 24);
     24;
     
     factorial(4, 1)
     Call Stack
     

     View Slide

147. factorial(4 /*, 1 */);
     factorial(3, 4);
     factorial(2, 12);
     factorial(1, 24);
     24;
     
     factorial(3, 4)
     Call Stack
     

     View Slide

148. factorial(4 /*, 1 */);
     factorial(3, 4);
     factorial(2, 12);
     factorial(1, 24);
     24;
     
     factorial(2, 12)
     Call Stack
     

     View Slide

149. factorial(4 /*, 1 */);
     factorial(3, 4);
     factorial(2, 12);
     factorial(1, 24);
     24;
     
     factorial(1, 24)
     Call Stack
     

     View Slide

150. factorial(4 /*, 1 */);
     factorial(3, 4);
     factorial(2, 12);
     factorial(1, 24);
     24;
     
     Call Stack
     

     View Slide

151. RECAP
     PREDICTABLE
     SAFE
     TRANSPARENT
     MODULAR
     

     View Slide

152. RESOURCES
     

     View Slide

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

     View Slide

154. ES6/7/LATER
     babeljs.io
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide