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

JavaScript Futures: ES2018 and Beyond

Jeff Strauss
September 19, 2018

JavaScript Futures: ES2018 and Beyond

JavaScript keeps on expanding. As adoption of the extensive new features from ES6 has spread and projects have adapted, the language has continued to evolve under the guidance of Ecma TC39. Over the past two years, another handful of constructs entered the ECMAScript specification. And there are nearly two dozen more proposals on the cusp of being added.

One thing is certain: the JavaScript community is not slowing down! How can we determine when it is “safe” to use a new feature? Investigate the new and proposed features of JavaScript. Understand the TC39 review process. And most of all, become empowered to prepare for what lies ahead.

Jeff Strauss

September 19, 2018
Tweet

More Decks by Jeff Strauss

Other Decks in Technology

Transcript

  1. #jsFutures E S 2 0 1 8 A N D

    T H E R O A D A H E A D @ j e f f r e y s t r a u ss
  2. let boy = { name: 'Keller', age: 7 }; let

    values = Object.values(boy); console.log(values); // ['Keller', 7] ES2017:
  3. let girl = { name: 'Madeleine', age: 3.5 }; let

    entries = Object.entries(girl); console.log(entries); // [ ['name', 'Madeleine'], ['age', 3.5] ] ES2017:
  4. let family = { dad: 'Jeff', mom: 'Jamie', boy: 'Keller',

    girl: 'Madeleine' }; for (const [k, v] of Object.entries(family)) { // iterate over and do something with properties } ES2017:
  5. let team = ['Jeff', 'Jon', 'Lee', 'Boon']; team.forEach(p => console.log(p.padStart(8,

    '-')); // ----Jeff // -----Jon // -----Lee // ----Boon ES2017:
  6. function chainCallbacks() { loadData(function(a) { loadDependentData(a, function(b) { processData(b, function(c)

    { saveData(c, function(d) { console.log(d); }); }); }); }); } PRE-ES2015
  7. function chainPromises() { loadData() .then(a => loadDependentData(a)) .then(b => processData(b))

    .then(c => saveData(c)) .then(d => console.log(d)); } ES2015 (PROMISES)
  8. async function awaitCalls() { const a = await loadData(); const

    b = await loadDependentData(a); const c = await processData(b); const d = await saveData(c); console.log(d); } ES2017 (ASYNC/AWAIT)
  9. async function awaitCalls() { try { const a = await

    loadData(); const b = await loadDependentData(a); const c = await processData(b); const d = await saveData(c); console.log(d); } catch(ex) { // handle the error } } ES2017 (ASYNC/AWAIT)
  10. async function awaitCalls() { const a = await loadData(); const

    b = await loadOtherData(a); const c = await processTheData(b); const d = await saveData(c); return d; // wraps d in Promise } awaitCalls().then(response => { console.log(response); // response resolves to d }); ES2017 (ASYNC/AWAIT)
  11. function multiSetProcess() { let taskA = loadDataSet1(); let taskB =

    loadDataSet2(); Promise.all([a, b]).then(results => { processData(...results).then(c => { console.log(c); }); }); } ES2015
  12. async function multiSetProcess() { let taskA = loadDataSet1(); let taskB

    = loadDataSet2(); const [a, b] = await Promise.all([taskA, taskB]); console.log(await processData(a, b)); } ES2017
  13. ...

  14. // spread syntax let arrToThree = [1, 2, 3]; let

    arrToSix = [...arrToThree, 4, 5, 6]; arrToSix; // [1, 2, 3, 4, 5, 6] ES2015
  15. // rest parameters function sum(...allArgs) { return allArgs.reduce((prev, curr) =>

    { return prev + curr; }); } console.log(sum(2, 4, 6, 8, 42)); ES2015
  16. // spread properties for object initializers let person = {

    first: 'Jeff', last: 'Strauss' }; let work = { company: 'WWT', location: 'St. Louis' }; let user = { ...person, ...work, lovesJavaScript: true }; ES2018
  17. // spread properties for object initializers let person = {

    first: 'Jeff', last: 'Strauss' }; let work = { company: 'WWT', location: 'St. Louis' }; ES2018 let user = { ...person, ...work, lovesJavaScript: true };
  18. // spread properties for object initializers user; /* { first:

    'Jeff', last: 'Strauss', company: 'WWT', location: 'St. Louis', lovesJavaScript: true } */ ES2018
  19. let person = { first: 'Jeff', last: 'Strauss', city: 'St.

    Louis', kids: 2 }; ES2018 let { first, last, ...info } = person; // rest properties for destructuring
  20. first; // 'Jeff' last; // 'Strauss' info; // { city:

    'St. Louis', kids: 2 } ES2018 let { first, last, ...info } = person; // rest properties for destructuring
  21. f; // 'Jeff' l; // 'Strauss' info; // { city:

    'St. Louis', kids: 2 } ES2018 let { first: f , last: l, ...info } = person; // rest properties for destructuring
  22. // loop over an iterable for (let item of values)

    {
 console.log(item); } ES2015
  23. // suppose getValues generates items asynchronously for (let item of

    getValues(seed)) {
 console.log(item); } ⓧ Uncaught TypeError: getValues(...) is not a function or its return value is not iterable ES2015
  24. // suppose getValues generates items asynchronously for await (let item

    of getValues(seed)) {
 console.log(item); } ES2015
  25. W H E R E T O G O F

    R O M H E R E invest
  26. #jsFutures j e f f r e y . s

    . s t r a u ss @ g m a i l . c o m @ j e f f r e y s t r a u ss