Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Scenic City Summit: Functional Programming Basics in ES6

Scenic City Summit: Functional Programming Basics in ES6

Jeremy Fairbank

August 12, 2016
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

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