Things You'll Love About ES6

Talk on ES6 given to the Bucks County Front-End meetup on Mar 10, 2015.

Disclaimer: Many of the code examples were taken from http://babeljs.io/docs/learn-es6/

Transcript

1. Things You’ll Love About ES6 JIM FITZPATRICK @fitzpatrick_j BCFE
2. What is “ES6”? Short for ECMAScript 6 (2015) ECMAScript == the JS language specification JavaScript == browser implementation “dialect”
3. New in ES6 Arrow Functions Classes Enhanced Object Literals Template Strings Destructuring Default + Rest + Spread Let + Const Iterators + For..Of Generators Comprehensions Unicode Modules Module Loaders Map + Set + WeakMap + WeakSet Proxies Symbols Subclassable Built-ins Math + Number + String + Array + Object APIs Binary and Octal Literals Promises Reflect API Tail Calls
4. const & let (function() { console.log(foo); // undefined if (true) { var foo = 'value'; } console.log(foo); // "value" })();
5. const & let (function() { console.log(foo); // ReferenceError if (true) { let foo = 'value'; } console.log(foo); // ReferenceError })();
6. const & let const foo = 'abc'; foo = 'def'; // TypeError
7. Template Strings `${x} + ${y} = ${x + y}`; `This is an ES6 multi-line string`;
8. Enhanced Object Literals var obj = { // __proto__ __proto__: theProtoObj, // Shorthand for ‘handler: handler’ handler, // Methods toString() { // Super calls return "d " + super.toString(); }, // Computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42 };
9. Computed Properties var obj = {}; obj[key] = value; return obj; { [key]: value }
10. Arrow Functions // Expression bodies var odds = evens.map(v => v + 1); var nums = evens.map((v, i) => v + i); // Statement bodies nums.forEach(v => { if (v % 5 === 0) { fives.push(v); } }); // Lexical this var bob = { _name: "Bob", _friends: [], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); } }
11. Default Params var date2epoch = function(date = new Date()) { return date.getTime() / 1000; };
12. Classes class SkinnedMesh extends THREE.Mesh { constructor(geometry, materials) { super(geometry, materials); this.idMatrix = SkinnedMesh.defaultMatrix(); this.bones = []; this.boneMatrices = []; //... } update(camera) { //... super.update(); } static defaultMatrix() { return new THREE.Matrix4(); } }
13. Modules // lib/mathplusplus.js export * from "lib/math"; export var e = 2.71828182846; export default function(x) { return Math.exp(x); } // app.js import exp, {pi, e} from "lib/mathplusplus"; alert("2π = " + exp(pi, e));
14. Unicode // same as ES5.1 " ".length == 2 // new RegExp behaviour, opt-in ‘u’ " ".match(/./u)[0].length == 2 // new form "\u{20BB7}" == " " == "\uD842\uDFB7" // new String ops " ".codePointAt(0) == 0x20BB7 // for-of iterates code points for (var c of " ") { console.log(c); }
15. String + Array + Object APIs 'abc'.startsWith('ab'); // => true 'abcde'.includes('cd'); // => true 'abc'.endsWith('bc'); // => true 'abc'.repeat(3) // => "abcabcabc" Array.from(document.querySelectorAll("*")) // Returns a real Array [6, -5, 8].find(x => x < 0); // => -5 [0, 0, 0].fill(7, 1) // => [0,7,7] [1, 2, 3].findIndex(x => x === 2); // => 1 var options = Object.assign({}, defaults, opts); Object.is(NaN, 0/0); // => true
16. String + Array + Object APIs 'abc'.startsWith('ab'); // => true 'abcde'.includes('cd'); // => true 'abc'.endsWith('bc'); // => true 'abc'.repeat(3) // => "abcabcabc" Array.from(document.querySelectorAll("*")) // Returns a real Array [6, -5, 8].find(x => x < 0); // => -5 [0, 0, 0].fill(7, 1) // => [0,7,7] [1, 2, 3].findIndex(x => x === 2); // => 1 var options = Object.assign({}, defaults, opts); Object.is(NaN, 0/0); // => true
17. String + Array + Object APIs 'abc'.startsWith('ab'); // => true 'abcde'.includes('cd'); // => true 'abc'.endsWith('bc'); // => true 'abc'.repeat(3) // => "abcabcabc" Array.from(document.querySelectorAll("*")) // Returns a real Array [6, -5, 8].find(x => x < 0); // => -5 [0, 0, 0].fill(7, 1) // => [0,7,7] [1, 2, 3].findIndex(x => x === 2); // => 1 var options = Object.assign({}, defaults, opts); Object.is(NaN, 0/0); // => true
18. String + Array + Object APIs 'abc'.startsWith('ab'); // => true 'abcde'.includes('cd'); // => true 'abc'.endsWith('bc'); // => true 'abc'.repeat(3) // => "abcabcabc" Array.from(document.querySelectorAll("*")) // Returns a real Array [6, -5, 8].find(x => x < 0); // => -5 [0, 0, 0].fill(7, 1) // => [0,7,7] [1, 2, 3].findIndex(x => x === 2); // => 1 var options = Object.assign({}, defaults, opts); Object.is(NaN, 0/0); // => true
19. Using ES6 Today
20. http://kangax.github.io/compat-table/es6/
21. http://babeljs.io/
22. @fitzpatrick_j Thanks!