ECMAScript 6

AECMAScript 6othree coscup

https://github.com/voodootikigod/logo.js

A

Self Intro

@othree https://blog.othree.net

twitter web standards murmur

flickr photo guy for confs

github html5.vim, tern-coffee…

ntust phd candidate

History

Syntax

1996

1997

1998

1999

History

JavaScript 1.0JScript 1.0JavaScript 1.1

JScript 2.0

JScript 3.0JavaScript 1.2

JavaScript 1.3

Netscape Microsoft

Standardization

⚈ Standard script language running on browser

⚈ Host by ECMA

ECMA歐洲電腦製造商協會

ECMAScript

⚈ Standard of JavaScript

⚈ ECMA-262, also called ECMAScript

⚈ 1.0, 2.0 published around 1997-1998

⚈ Current Edition: 5.1

http://zh.wikipedia.org/wiki/ECMAScript

History

⚈ Browser War

⚈ ES3 most supported

⚈ ES4 abandoned

⚈ ES5 current

⚈ ES6 talking today

1999

2009

2014

ES3

⚈ Most supported

⚈ IE6, 7, 8

ES4

⚈ Flash, ActionScript

⚈ Abandoned

ES5

⚈ From 3.1

⚈ Strict mode

⚈ More solid spec

What is ES Now

⚈ ECMAScript is spec

⚈ JavaScript is implementation by Mozilla

⚈ IE’s: JScript

⚈ Host by ECMA International

JavaScript

1.5 ECMAScript 3

1.6 array extras + array and string generics + E4X

1.7 Pythonic generators + iterators + let

1.8 generator expressions + expression closures

1.81 native JSON support

1.85 ECMAScript 5 compliance

1.86 more ES6 futures

http://en.wikipedia.org/wiki/JavaScript#Version_history

New in JavaScripthttps://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript

ES6

⚈ Next world wide web scripting language

⚈ Lots of new feature

⚈ Also called ECMAScript Harmony

Q&A

⚈ May I use today

Q&A

⚈ May I use today

⚈ Yes

⚈ Google is using (AngularJS 2.0)

ES5 You May Not Know

http://youtu.be/UTEqr0IlFKY

ES6 Features

Major Features

Module Class

Iterator Syntax

Syntax

History

Iterator���

let

⚈ Block scope local variable

http://mdn.io/let

let

{! let foo = 100;! foo; // 100!}!!foo; //undefined

let

for (let i = 0; i < len; i++) {! // blah!}

const

const foo = 100;!foo; // 100!!foo = 101;!!foo; // 100

Template Literals

var name = 'world';!!var greeting = `hello ${name}`;!!greeting; //hello world;

`

⚈ Grave accent

⚈ Back tick

⚈ Shell: execute command in between

Arrow Function

var square = (x) => {! return x * x;!};!!var square2 = x => x * x;

http://mdn.io/arrow

Arrow Function// Empty function body!var foo = (x) => {}!!// Single parameter!var foo = x => {}!!// No parameter!var foo = () => {}!!// More parameters!var foo = (x, y) => {}

Arrow Function

// Single expression!var foo = (x) => x*x!!// Multiple expression!var foo = (x) => {! let y = x * x;! // need return! return y * x;!}

Arrow Function

⚈ Auto return result of single expression

⚈ Lexical this , like CoffeeScript

Default Parameter

function foo(x = 5, y = 5) { }

Rest Parameters

function foo(x = 5, ...rest) {! rest;!}!!foo(1, 2, 3, 4, 5, 6);!// [2,3,4,5,6]

Spread Operator

function f(x, y, z) { }!var args = [0, 1, 2];!!f.apply(null, args);!!f(...args);

Spread Operator

var arg2 = [...args, 3, 4];!// [0,1,2,3,4]!!var arg3 = arg.push(...arg2);!// [0,1,2,0,1,2,3,4]

Destructing Assign

var a, b;!![a, b] = [1, 2];!//a:1, b:2

Destructing Assign

[a, b] = [b, a];!//swap!![a, ,[b, c]] = [1, 0, [2, 3]];!//a:1, b:2, c:3!!{lan: a, lon: b} = getPOS();!//object destructing

Destructing and Spread

[a, ...b] = [1, 2, 3, 4, 5];!//a:1, b:[2,3,4,5]

Classclass Counter {! constructor() {! this.count = 0;! }! tick() {! this.count++;! }! get count() {! return this.count;! }!}

Class Extendsclass People extends Counter {! constructor(people) {! this.people = people;! for (let p in people) {! this.tick();! }! }!}!!var p = new People([1,2,3,4,5]);!p.count; //5

Class

⚈ No multiple inheritance

⚈ Define property only in constructor

Map

⚈ Like object, {…}

⚈ Key, value pair data structure

⚈ Use non-string data as key

⚈ Native object’s key will use toString

Mapm = new Map();!m.set(true, 'T');!m.set(false, 'F');!!m.size; //2!!m.get(true); //"T"!m.get(false); //"F"!!m.get(1); // undefined

Map Methods

clear has

delete keys

entries set

forEach values

get

Set

⚈ Like array, […]

⚈ Can’t get value at specific index

⚈ Use for…of

Set

s = new Set();!s.add('A');!s.add('B');!s.add('C');!!for (v of s) {! console.log(v);!}!// A, B ,C

Set Methods

add forEach

clear has

delete values

entries

for…of

for...of

⚈ New loop method

⚈ Like CoffeeScript’s for...in

⚈ Used to loop iterable object items

Iterable

Array String

Map Set

Create Custom Iterable Object

Iterator���

Syntax

Use ES6 Today

Iterator

⚈ A new interface in ES spec

⚈ User can implement custom iterator

⚈ An object with next method

http://mdn.io/iterator

iterator.next

⚈ Return an object with value and done!

⚈ value is next item’s value

⚈ done shows is this iterator finished

⚈ Can’t reuse

Iterator

var it = idMaker();!!console.log(it.next().value);!console.log(it.next().value);!console.log(it.next().value);

Generator

⚈ Like idMaker

⚈ Generator is a function, generate iterator

⚈ Different invoke will create different iterator, iterate the same list.

Generatorfunction idMaker() {! var index = 0;! return {! next: function () {! return {! value: index++,! done: false! };! }! };!}

yield

⚈ yield is generator helper

⚈ Let you easy to create generator

yield

function* idMaker(){! var index = 0;! while(true)! yield index++;!}

http://mdn.io/generator

yield

function* idMaker(){! var index = 0;! while(index < 6)! yield index++;!}

http://mdn.io/generator

yield

⚈ * is the indicator to tell runtime

⚈ yield is return point

yield

function* idMaker(){! var index = 0;! while(index < 6)! yield index++;!}

http://mdn.io/generator

This is a generator

First Call

function* idMaker(){! var index = 0;! while(index < 6)! yield index++;!}

http://mdn.io/generator

return

starts here

Second Call

function* idMaker(){! var index = 0;! while(index < 6)! yield index++;!}

http://mdn.io/generator

returnstarts here

yield

⚈ Function end will return done: true

Iterable

⚈ Have generator function in the object

⚈ Under @@iterator property

IterableID = {};!!ID['@@iterator'] = idMaker;!//or use Symbol!ID[Symbol.iterator] = idMaker;!!for (id of ID) {! id;! //0,1,2,3,4,5!}

http://people.mozilla.org/~jorendorff/es6-draft.html#table-1

Iterable Features

for…of

Comprehension

var ns = [1, 2, 3, 4];!!var dbls = [for (i of ns) i*2];!!dbls; // [2, 4, 6, 8]

簡約式

CoffeeScript Syntax

arr = [1, 2, 3, 4];!!res = (x for x in arr);

2 Level Comprehension

var ms = [1, 2, 3, 4];!var ns = [2, 3, 4, 5];!![for (i of ms) for (j of ns) i*j];!// [2, 6, 12, 20]

Conditional Comprehension

var ns = [1, 2, 3, 4];!![for (i of ns) if (i % 2) i];!//[1, 3]

Comprehension for Iterator

var ns = [1, 2, 3, 4];!!(for (i of ns) if (i % 2) i);!//iterator with values [1, 3]

more…

⚈ Object Literal Extensions

⚈ Proxy

⚈ Modules, Import, Export

⚈ Promise

⚈ Symbol

Use ES6 Today

Iterator���

ECMAScript 7,8…

http://kangax.github.io/compat-table/es6/

Web

ES6 for Web

⚈ Precompile ES6 to ES5

⚈ traceur-compiler

⚈ from Google

⚈ AngularJS 2.0

https://github.com/google/traceur-compiler

in Develop

⚈ Need watch and compile when file changes

⚈ Use gulp to watch

⚈ gulp-traceur or es6ify to compile

⚈ https://github.com/othree/es6-skeleton

es6-skeleton

⚈ A project seed

⚈ Based on gulp

⚈ browserify, es6ify

⚈ livereload

ECMAScript 7,8…

Use ES6 Today

Conclusion

ES.future

ES7 ES8

guards macros

contractsparallel arrays

(SIMD)

event loop concurrency

http://www.2ality.com/2011/09/es6-8.html

http://youtu.be/3WgVHE5Augc

Type

⚈ First see in ActionScript

ActionScript 3.0 Cookbook

Type

⚈ TypeScript also has type imply syntax

Type in ES.future

⚈ Called guards

let x :: Number = 37;!!function f(p :: Int) :: cType {}!!let o = {! a :: Number : 42,! b: “b"!};

let x :: Number = 37;!!function f(p :: Int) :: cType {}!!let o = {! a :: Number : 42,! b: “b"!};

Benefit

⚈ Write more solid code

⚈ Better Performance

⚈ JS engine detects variable type change now

⚈ JSLint: confusion: true

http://www.html5rocks.com/en/tutorials/speed/v8/

Where is new Spec

Traceur-Compiler Doc

https://github.com/google/traceur-compiler/wiki/LanguageFeatures

ES Wiki

http://wiki.ecmascript.org/doku.php

Spec Draft

http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

ES Wiki

⚈ strawman: pre proposal

⚈ harmony: TC39 approved proposal

TC39 Meeting Notes

https://github.com/rwaldron/tc39-notes

Conclusion

ECMAScript 7,8…

Conclusion

⚈ ES6 is coming

⚈ You can use it today

⚈ Get ready for ES7, 8, 9, 10, 11

A

AQ&A