Scenic City Summit: Functional Programming Basics in ES6

Transcript

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

   View Slide

2. sigient.com
   Your website, SimplyBuilt.
   simplybuilt.com
   

   View Slide

3. 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', 'scenic city summit');
    // hello scenic city summit
    

    View Slide

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

    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('Scenic City Summit', 'Hello');
    // Hello Scenic City Summit
    greet('Chattanooga');
    // Hi Chattanooga
    

    View Slide

26. Object.assign(
    {},
    { hello: 'Chattanooga' },
    { hi: 'Scenic City Summit' }
    );
    // {
    // hello: 'Chattanooga',
    // hi: 'Scenic City Summit'
    // }
    

    View Slide

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

28. PURE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. HIDDEN STATE IS
    UNCERTAIN STATE
    

    View Slide

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

35. HOW TO ACHIEVE THE
    RESULT
    IMPERATIVE
    

    View Slide

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

37. DECLARE WHAT THE
    DESIRED RESULT IS
    DECLARATIVE
    

    View Slide

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

    View Slide

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

    View Slide

40. CREATE STATE, DON’T
    MUTATE IT
    IMMUTABLE
    

    View Slide

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

    View Slide

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

43. Object.freeze
    Immutable.js
    

    View Slide

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

    View Slide

45. FREE YOUR
    STATE
    

    View Slide

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

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

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

    View Slide

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

    View Slide

50. FIRST CLASS
    FUNCTIONS
    

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

55. ENCAPSULATION
    CLOSURES
    

    View Slide

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

    View Slide

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

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

    View Slide

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

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

62. FOUNDATION FOR
    HIGHER ORDER
    PATTERNS
    FIRST CLASS
    CLOSURES
    

    View Slide

63. PARTIAL
    APPLICATION
    

    View Slide

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

    View Slide

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

    View Slide

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

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. const partialFromBind = (fn, ...args) => {
    return fn.bind(null, ...args);
    };
    const partial = (fn, ...args) => {
    return (...otherArgs) => {
    return fn(...args, ...otherArgs)
    };
    };
    

    View Slide

73. CURRYING
    

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

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 add = x => y => x + y;
    function add(x) {
    return function(y) {
    return x + y;
    };
    }
    

    View Slide

79. const request = defaults => options => {
    options = Object.assign(
    {}, defaults, options
    );
    return fetch(options.url, options)
    .then(resp => resp.json());
    };
    

    View Slide

80. const request = defaults => options => {
    options = Object.assign(
    {}, defaults, options
    );
    return fetch(options.url, options)
    .then(resp => resp.json());
    };
    

    View Slide

81. PIECING IT
    TOGETHER
    

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

93. COMPOSING
    CLOSURES
    

    View Slide

94. 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 words = [
    'hello', 'functional', 'programming'
    ];
    const newWords = words.map(processWord);
    console.log(newWords);
    // ['OL-LEH, 'LANOI-TCNUF', 'GNIMM-ARGORP']
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

105. RECURSION SOLVE A PROBLEM
     IN TERMS OF ITSELF
     

     View Slide

106. FACTORIAL
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

111. factorial(4);
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     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;
     

     View Slide

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

119. STEPS
     Find the recurrence

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

     Find the base case

     (n < 2)
     

     View Slide

120. PERFORMANCE
     RECURSION
     

     View Slide

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

     View Slide

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

     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;
     
     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)
     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)
     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)
     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)
     factorial(1)
     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)
     factorial(2)
     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)
     factorial(3)
     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;
     
     factorial(4)
     Call Stack
     

     View Slide

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

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

133. IN ES2015!
     TAIL CALL
     OPTIMIZATION
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

152. RECAP
     PREDICTABLE
     SAFE
     TRANSPARENT
     MODULAR
     

     View Slide

153. RESOURCES
     

     View Slide

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

     View Slide

155. ES6/7/LATER
     babeljs.io
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

159. THANKS!
     Jeremy Fairbank
     blog.jeremyfairbank.com
     @elpapapollo / jfairbank
     Code: github.com/jfairbank/fp-basics-in-es6
     

     View Slide