ECMAScript 6: highlights and recommendations

ECMAScript 6: highlights and recommendations

5592487d2231fbe06ed2ac80d92c8f20?s=128

Axel Rauschmayer

May 06, 2015
Tweet

Transcript

  1. ECMAScript 6: highlights and recommendations Front-Trends, 2015-05-06 Slides: speakerdeck.com/rauschma

  2. Dr. Axel Rauschmayer, Ecmanauten.de ECMAScript 6 (ES6): JavaScript, improved ECMAScript

    6: next version of JavaScript (current: ES5). This presentation: • Overview of ES6 • Assessment of ES6 features • Cool stuff you can do with ES6 2
  3. Background

  4. Dr. Axel Rauschmayer, Ecmanauten.de Important ES terms • TC39 (Ecma

    Technical Committee 39): the committee evolving JavaScript • ECMAScript: official name of the language • Versions: ECMAScript 5 is short for “ECMAScript Language Specification, Edition 5” • ECMAScript 2015: new official name for ES6 (in preparation for yearly releases in ES7+) • Complicated, because ES6 is already so established • JavaScript: the language, colloquially • ECMAScript Harmony: set of features after ES5 (ES6 and later) 4
  5. Dr. Axel Rauschmayer, Ecmanauten.de Time table ECMAScript 6 is done:

    • The spec is frozen • June 2015: formal publication • Features are continually appearing in current engines. 5
  6. Assessing ES6 features

  7. Dr. Axel Rauschmayer, Ecmanauten.de Classes class Person { constructor(name) {

    this.name = name; } describe() { return 'Person called '+this.name; } } function Person(name) { this.name = name; } Person.prototype.describe = function () { return 'Person called '+this.name; }; 7
  8. Dr. Axel Rauschmayer, Ecmanauten.de Why I recommend classes Pros: •

    Code more portable • Tool support (IDEs, type checkers, …) • Foundation for (longer term): • immutable objects • value objects • traits (similar to mixins) • Subclassing built-ins • Help many newcomers
 Cons: • Syntax quite different from semantics • Based on constructors, not prototype chains (directly) 8
  9. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the good Good and

    boring: • Polyfillable parts of standard library (Maps, new String +Array methods, Promises) • Unify community, convenient syntax: • Modules • Classes • Arrow functions: less clutter, lexical this 9
  10. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the good • Generators:

    lazy programming and cooperative multitasking • Proxies: meta-programming (shimming the DOM etc.) • WeakMaps: caching, private data • Destructuring: handling return values, parameters, for-of loop elements 10
  11. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the bad • Enumerability

    more complicated than ever • Coercion rules for symbols are complicated, probably not worth their benefits • Disconnect between class syntax and class semantics (look like an object, are a function) • Kind-of work-around: treat them at face value 11
  12. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the OK • Symbols

    12
  13. Various cool features

  14. Dr. Axel Rauschmayer, Ecmanauten.de Destructuring Extract multiple values via patterns:

    let obj = { first: 'Jane', last: 'Doe' }; let { first: f, last: l } = obj; // f='Jane', l='Doe' Can be used for: • variable declarations (var, let, const) • assignments • parameter definitions • for-of loop 14
  15. Dr. Axel Rauschmayer, Ecmanauten.de Destructuring: arrays let [x, y] =

    ['a', 'b']; // x='a', y='b' let [x, y, ...rest] = ['a', 'b', 'c', 'd']; // x='a', y='b', rest = [ 'c', 'd' ] [x,y] = [y,x]; // swap values let [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31'); 15
  16. Dr. Axel Rauschmayer, Ecmanauten.de Named parameters // Emulated via object

    literals and destructuring // { opt1, opt2 } is same as // { opt1: opt1, opt2: opt2 } selectEntries({ step: 2 }); selectEntries({ end: 20, start: 3 }); selectEntries(); // enabled via `= {}` below function selectEntries( {start=0, end=-1, step=1} = {}) { ··· }; 16
  17. Dr. Axel Rauschmayer, Ecmanauten.de Template literals // String interpolation if

    (x > MAX) { throw new Error( `At most ${MAX} allowed: ${x}!` // 'At most '+MAX+' allowed: '+x+'!' ); } // Multiple lines let str = `this is a text with multiple lines`; 17
  18. Dr. Axel Rauschmayer, Ecmanauten.de WeakMaps • Maps with arbitrary keys,

    arbitrary values • Key garbage collected 㱺 entry garbage collected • Thus: great for attaching data to objects 18
  19. Dr. Axel Rauschmayer, Ecmanauten.de WeakMaps for private data let _counter

    = new WeakMap(); let _action = new WeakMap(); class Countdown { constructor(counter, action) { _counter.set(this, counter); _action.set(this, action); } dec() { let counter = _counter.get(this); if (counter < 1) return; counter--; _counter.set(this, counter); if (counter === 0) { _action.get(this)(); } } } 19
  20. Cool features: generators

  21. Dr. Axel Rauschmayer, Ecmanauten.de Generators as data consumers function* dataConsumer()

    { console.log('Started'); console.log(`1. ${yield}`); console.log(`2. ${yield}`); return 'result'; } > let genObj = dataConsumer(); > genObj.next() // progress to next suspension Started { value: undefined, done: false } > genObj.next('a') 1. a { value: undefined, done: false } > genObj.next('b') 2. b { value: 'result', done: true } 21
  22. Dr. Axel Rauschmayer, Ecmanauten.de Async lazy processing: start let fileName

    = process.argv[2]; readFile(fileName, chain(splitLines, numberLines, printLines)); 22
  23. Dr. Axel Rauschmayer, Ecmanauten.de Step 1: pushing data asynchronously /**

    * Create asynchronous ReadStream for file `fileName` * and feed it to generator object `target`. */ function readFile(fileName, target) { let readStream = createReadStream(fileName, { encoding: 'utf8', bufferSize: 1024 }); readStream.on('data', buffer => { let str = buffer.toString('utf8'); target.next(str); }); readStream.on('end', () => { // Signal end of output sequence target.return(); }); } 23
  24. Dr. Axel Rauschmayer, Ecmanauten.de Step 2: text chunks → sequence

    of lines function* splitLines(target) { let previous = ''; try { while (true) { previous += yield; let eolIndex; while ((eolIndex = previous.indexOf('\n')) >= 0) { let line = previous.slice(0, eolIndex); target.next(line); previous = previous.slice(eolIndex+1); } } } finally { // Handle the end of the input sequence // (signaled via `return()`) if (previous.length > 0) { target.next(previous); } // Signal end of output sequence target.return(); } } 24
  25. Dr. Axel Rauschmayer, Ecmanauten.de Step 3: prefix numbers to a

    sequence of lines function* numberLines(target) { try { for (let lineNo = 0; ; lineNo++) { let line = yield; target.next(`${lineNo}: ${line}`); } } finally { // Signal end of output sequence target.return(); } } 25
  26. Dr. Axel Rauschmayer, Ecmanauten.de Step 4: log result function* printLines()

    { while (true) { let line = yield; console.log(line); } } Everything happens on demand, text chunk by text chunk! 26
  27. Cool features: generators as data producers

  28. Dr. Axel Rauschmayer, Ecmanauten.de Generators as data producers function* genFunc()

    { yield 'a'; yield 'b'; } > let genObj = genFunc(); > genObj.next() { value: 'a', done: false } > genObj.next() { value: 'b', done: false } > genObj.next() // end of sequence reached { value: undefined, done: true } 28
  29. Dr. Axel Rauschmayer, Ecmanauten.de An iterator for a tree (1/2)

    class BinaryTree { constructor(value, left=null, right=null) { this.value = value; this.left = left; this.right = right; } /** Prefix iteration */ * [Symbol.iterator]() { yield this.value; if (this.left) { yield* this.left; } if (this.right) { yield* this.right; } } } 29
  30. Dr. Axel Rauschmayer, Ecmanauten.de An iterator for a tree (2/2)

    let tree = new BinaryTree('a', new BinaryTree('b', new BinaryTree('c'), new BinaryTree('d')), new BinaryTree('e')); for (let x of tree) { console.log(x); } // Output: // a // b // c // d // e 30
  31. Cool features: generators for async

  32. Dr. Axel Rauschmayer, Ecmanauten.de Asynchronous programming (1/2) co(function* () {

    try { let [croftStr, bondStr] = yield Promise.all([ getFile('http://localhost:8000/croft.json'), getFile('http://localhost:8000/bond.json'), ]); let croftJson = JSON.parse(croftStr); let bondJson = JSON.parse(bondStr); console.log(croftJson); console.log(bondJson); } catch (e) { console.log('Failure to read: ' + e); } }); 32
  33. Dr. Axel Rauschmayer, Ecmanauten.de Asynchronous programming (2/2) function getFile(url) {

    return fetch(url) .then(request => request.text()); } 33
  34. Conclusion

  35. Dr. Axel Rauschmayer, Ecmanauten.de Take-aways: ECMAScript 6 • Many features

    are already in engines • Can be used today, by compiling to ECMAScript 5 • Biggest impact on community (currently: fragmented): • Classes • Modules 35
  36. Thank you! • Free online book by Axel: “Exploring ES6”

    • GitHub: rauschma/generator-examples/node/readlines.js © Scott the Hobo