javascript innovationsdownload.microsoft.com/download/b/3/c/b3c63783-2811-4694...today const, let,...
TRANSCRIPT
![Page 1: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/1.jpg)
![Page 2: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/2.jpg)
JavaScript InnovationsEcmaScript 6 & 7
![Page 3: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/3.jpg)
JavaScript InnovationsEcmaScript 2015 & 2016
![Page 4: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/4.jpg)
Today
const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object literals, classes, proxy, iterators, for..of, generators, promise, unicode, normalize, modules, import, export, symbols, subclassing, reflection api, map, set, weakmap, weakset, typed arrays, template strings, string, number, array, math, binaryliterals, octal literals, regexp, exponentiationoperator, object observe, async function...
![Page 5: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/5.jpg)
What?
• What is removed?
• What is added?
![Page 6: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/6.jpg)
Use today
• Internet Explorer?
• Edge?
• FireFox?
• Chrome?
• Node?
• Babel? Babel???????
![Page 7: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/7.jpg)
Use today
• ES 2015: http://kangax.github.io/compat-table/es6/
• ES 2016: http://kangax.github.io/compat-table/es7/
![Page 8: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/8.jpg)
Current browser
• Shims• https://github.com/paulmillr/es6-shim/
• Transpilers• Babel: https://babeljs.io/
• Traceur: https://github.com/google/traceur-compiler
![Page 9: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/9.jpg)
Limitations of transpilers
• ES5
![Page 10: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/10.jpg)
Why is JavaScript Hard?
• JavaScript Jabber podcast: http://devchat.tv/js-jabber/159-jsj-why-javascript-is-hard
![Page 11: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/11.jpg)
Why is JavaScript Hard?
• Different implementations(browsers/transpilers/node/etc.)
• Scope
• This
• Prototype
• Verbose syntax
• DOM/Array objects are not JavaScriptobjects
![Page 12: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/12.jpg)
DEMO
![Page 13: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/13.jpg)
Demo
• GitHub:https://github.com/rickbeerendonk/ECMAScript-2015-2016-Demos
![Page 14: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/14.jpg)
QUIZ
![Page 15: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/15.jpg)
Valid variable declarations
a) const
b) var
c) set
d) let
a, b, d
![Page 16: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/16.jpg)
Valid function declarations
a) function (x) { return x + x; };
b) (x) => { return x + x; };
c) [Method:] toString() { return "Hello"; }
d) x => x + x;
all
![Page 17: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/17.jpg)
Not transpilable features
a) Modules
b) let
c) Proxies
d) Subclassing built-ins
e) Iterators
c, d (partly)
![Page 18: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/18.jpg)
Criticism
• Add only = More complexity
![Page 19: JavaScript Innovationsdownload.microsoft.com/download/B/3/C/B3C63783-2811-4694...Today const, let, default parameters, rest parameter, spread operator, destructuring, arrows, object](https://reader036.vdocuments.net/reader036/viewer/2022062414/5ed7940c67b53e06555d2b43/html5/thumbnails/19.jpg)
ES 2016
• Exponential operator
• Object.observe
• Async functions
• Draft | Proposal | Strawman