ES6: Using future JavaScript today

This talk covers the upcoming specification of JavaScript, ECMAScript 6. It highlight some of the key features, and most importantly, how it can be used in projects today.

Transcript

1. Phil Bottomley ES6 Using future JavaScript today @philbotto
2. Agenda
3. What is ECMAScript?
4. ES4 ES3 ES5 1999 2009 Abandoned 2008
5. Firefox 37 Chrome 42 Safari 8 iOS8 IE11 IE10 IE9 IE8 11% 97% 100% 100% 100% 100% 100% 100%
7. ES4 ES6 ES3 ES5 1999 2009 Abandoned 2015
8. classes enhanced object literals template strings destructuring default rest spread let const iterators for..of generators unicode arrows modules module loaders map set weakmap weakset proxies symbols subclassable built-ins promises math number string array object APIs binary and octal literals reflect api tail calls
9. Arrow functions var shopping = [ 'Milk', 'Bread', 'Flour', 'Eggs' ]; var s2 = shopping.map(s => s.length);
10. Arrow functions var person = { name: 'John', age: 30, children: ['Jane', 'Jonny'], printChildren: function () { this.children.forEach(c => { console.log(this.name + ' has child ' + c); }); } };
11. Let / Const function doSomething() { console.log(foo); // Error if (true) { let foo = 'bar'; let foo = 'oops'; // Error } console.log(foo); // Error }
12. Let / Const const MINUTES = 60; MINUTES = 120 // Error
13. Enhanced Object Literals var obj = { // prototype __proto__: protoObject, // ‘handler: handler’ handler, // Shorthand methods hello() { return 'Hello, ' + super.hello(); }, // Computed property names [secret]: 42 };
14. Default + Rest + Spread function doSomething(x, y=2) { return x + y; } doSomething(100); doSomething(100, undefined);
15. Default + Rest + Spread function doSomething(x, ...y) { // y is an Array return x * y.length; } doSomething(3, "hello", true);
16. Default + Rest + Spread function doSomething(x, y, z) { return x + y + z; } var someArray = [1, 2, 3]; doSomething(...someArray);
17. Template strings var name = 'Bob'; var hello = `Hello, my name is ${name}`; var hello2 = `Hello my name is Bob`;
18. Iterators + For…Of var words = ['One', 'Two', 'Three'] for (var word of words) { console.log(word); } // One, Two, Three
19. Generators function *foo() { var x = 1 + (yield "foo"); console.log(x); }
20. Generators function *foo() { yield 1; yield 2; return 3; } var iterator = foo(); console.log( iterator.next() ); // { value:1, done:false } console.log( iterator.next() ); // { value:2, done:false } console.log( iterator.next() ); // { value:3, done:true }
21. Generators function *foo() { yield 1; yield 2; return 3; } for (var v of foo()) { console.log(v); } // 1 2
22. Classes class Animal { constructor(name, legs) { this.name = name; this.legs = legs; } hello() { return 'Hello, my name is ' + this.name; } }
23. Classes class Cat extends Animal { constructor(name) { super(name, 4); } hello() { return 'Meow, my name is ' + this.name; } }
24. Modules import Animal from ‘./animal’; import { square, squareRoot } from ‘./utils’; import * as utils from ‘./utils’;
25. Modules // ———— animal.js ———— export default class Animal { //... } // ———— utils.js ———— export function square(x) { //.. } export function squareRoot(x) { //.. }
26. Array, Number and String Array.from() Array.of() Array.prototype.fill() Array.prototype.find() Array.prototype.findIndex() Array.prototype.entries() Array.prototype.keys() Array.prototype.copyWithin() Number.isNaN() Number.isFinite() Number.isInteger() Number.parseInt() Number.parseFloat() Number.isSafeInteger() Number.EPSILON Number.MAX_SAFE_INTEGER Number.MIN_SAFE_INTEGER String.raw() String.fromCodePoint() String.prototype.codePointAt() String.prototype.normalize() String.prototype.startsWith() String.prototype.endsWith() String.prototype.includes() String.prototype.repeat()
27. Spartan Firefox 37 Chrome 42 Safari 8 IE 11 16% 20% 45% 63% 73% IOS 8 20% io.js Node 23% 41%
28. ES5 ES6
29. Traceur 61% github.com/google/traceur-compiler
30. TypeScript 25% typescriptlang.org
31. Babel 77% babeljs.io
32. Demo
33. Others ESLint Babelify gulp-babel grunt-babel
34. kangax.github.io/compat-table/es6 jsrocks.org github.com/lukehoban/es6features babeljs.io/repl
35. Questions?