$30 off During Our Annual Pro Sale. View Details »

Proper Tail Calls - New Feature in ECMAScript 2015

Proper Tail Calls - New Feature in ECMAScript 2015

Lightning talk at Gee-Fes Kyoto http://camphor.connpass.com/event/33988/ on July 3, 2016.

Demo page is available at https://ymyzk.github.io/ptc-example/

Yusuke Miyazaki

July 03, 2016
Tweet

More Decks by Yusuke Miyazaki

Other Decks in Programming

Transcript

  1. New feature in ECMAScript 2015
    Yusuke Miyazaki
    2016/7/3
    Gee-Fes Kyoto @MTRL KYOTO
    Proper Tail Calls

    View Slide

  2. ECMAScript

    View Slide

  3. ECMAScript 2015 (ES6)
    • ECMA-262 Edition 6, released in June 2015
    • Features: arrow functions / classes / promise /
    let / const / template literals / generators /
    proper tail calls etc…
    • You can try some of them with recent
    implementations or compilers (e.g. Babel,
    Traceur)

    View Slide

  4. ECMAScript 2016 (ES7)
    • ECMA-262 Edition 7, released in June 2016

    !!!!!!!!!"""""""""
    • Minor update from ECMAScript 2015
    • exponentiation operator **
    • Array.prototype.includes

    View Slide

  5. Factorial

    View Slide

  6. Factorial
    • Definition
    • factorial(n) = n! = 1 * 2 * 3 * … * n
    • Recursive Definition
    • factorial(0) = 1
    • factorial(n) = n * factorial(n - 1)

    View Slide

  7. Implementation
    • Implement factorial using recursive definition
    • It’s natural & functional!!
    "use strict";
    function fact(n) {
    if (n == 0) { return acc; }
    return n * fact(n - 1); // Not tail call
    }
    fact(100); // 100!

    View Slide

  8. Tail Call Implementation
    • Rewrite previous code using tail call
    • Function call is performed in return statement
    "use strict";
    function fact(n, acc) {
    if (n == 0) { return acc; }
    return fact(n - 1, n * acc); // Tail call
    }
    fact(100, 1); // 100!

    View Slide

  9. Let’s try it
    n Result Time [msec]
    1,000 Infinity 0.36
    10,000 Infinity 1.65
    100,000
    Maximum call stack size
    exceeded.
    14655.18
    049&M$BQJUBO4BGBSJ

    .BD#PPL1SP &BSMZ
    $PSFJ6
    ???

    View Slide

  10. Call Stack

    View Slide

  11. Call Stack
    • Call stack is used when
    function is called
    • Includes arguments, return
    address, etc…
    • Size is limited

    → We reached that limit
    when we call fact(100,000)

    n = 97
    n = 98
    n = 99
    n = 100

    View Slide

  12. Proper Tail Calls

    View Slide

  13. Proper Tail Calls (PTC)
    • If a tail call meets some conditions…
    • strict mode, normal function or arrow
    function, etc…
    • ECMAScript 2015 requires that a call in tail
    position will reuse the caller’s stack space!!
    • Differs from tail call optimization

    View Slide

  14. Pseudo-translation
    "use strict";
    function fact(n, acc) {
    while (true) {
    if (n == 0) {
    return acc;
    }
    acc = n * acc;
    n = n - 1;
    }
    }
    "use strict";
    function fact(n, acc) {
    if (n == 0) {
    return acc;
    }
    return fact(n - 1,
    n * acc);
    }

    View Slide

  15. Benefit of PTC
    • Unbounded number of consecutive tail calls
    • Reduce stack size / memory footprint
    • Performance improvements
    • Less processing when returning value
    • But maybe slower than for-loop
    → Better performance with beautiful code!

    View Slide

  16. Let’s try it again!
    n Result Time [msec]
    1,000 Infinity 0.41
    10,000 Infinity 1.84
    100,000 Infinity 13.56
    10,000,000 Infinity 106.07
    049&M$BQJUBO4BGBSJ5FDIOPMPHZ1SFWJFX 4VQQPSUT15$

    .BD#PPL1SP &BSMZ
    $PSFJ6

    View Slide

  17. Conclusion
    • Proper Tail Call is one of the best feature in ES2015
    • Natural, beautiful & high-performance code!
    • Let’s try it with following implementations
    • Safari Technology Preview
    • WebKit Nightly Build
    • XS6

    View Slide

  18. Thank You for Listening!
    • Reference
    • http://www.ecma-international.org/
    ecma-262/6.0/
    • https://webkit.org/blog/6240/ecmascript-6-
    proper-tail-calls-in-webkit/
    • Demo
    • https://ymyzk.github.io/ptc-example/

    View Slide