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/

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