talk at COSCUP 2014

1. ECMAScript 6
othree coscup

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

3. Self Intro
@othree https://blog.othree.net
twitter web standards murmur
flickr photo guy for confs
github html5.vim, tern-coffee…
ntust phd candidate

4. History
Syntax

5. 1996
1997
1998
1999
History
JavaScript 1.0
JScript 1.0JavaScript 1.1
JScript 2.0
JScript 3.0
JavaScript 1.2
JavaScript 1.3
Netscape Microsoft

6. Standardization
⚈ Standard script language running on browser
⚈ Host by ECMA

7. ECMA歐洲電腦製造商協會

8. 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

9. History
⚈ Browser War
⚈ ES3 most supported
⚈ ES4 abandoned
⚈ ES5 current
⚈ ES6 talking today
1999
2009
2014

10. ES3
⚈ Most supported
⚈ IE6, 7, 8

11. ES4
⚈ Flash, ActionScript
⚈ Abandoned

12. ES5
⚈ From 3.1
⚈ Strict mode
⚈ More solid spec

13. What is ES Now
⚈ ECMAScript is spec
⚈ JavaScript is implementation by Mozilla
⚈ IE’s: JScript
⚈ Host by ECMA International

14. 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

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

16. ES6
⚈ Next world wide web scripting language
⚈ Lots of new feature
⚈ Also called ECMAScript Harmony

17. Q&A
⚈ May I use today

18. Q&A
⚈ May I use today
⚈ Yes
⚈ Google is using (AngularJS 2.0)

19. ES5 You May Not
Know

20. http://youtu.be/UTEqr0IlFKY

21. ES6 Features

22. Major Features
Module Class
Iterator Syntax

23. Syntax
History
Iterator

24. let
⚈ Block scope local variable
http://mdn.io/let

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

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

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

28. Template Literals
var name = 'world';!
!
var greeting = `hello ${name}`;!
!
greeting; //hello world;

30. `
⚈ Grave accent
⚈ Back tick
⚈ Shell: execute command in between

31. Arrow Function
var square = (x) => {!
return x * x;!
};!
!
var square2 = x => x * x;
http://mdn.io/arrow

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

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

34. Arrow Function
⚈ Auto return result of single expression
⚈ Lexical this , like CoffeeScript

35. Default Parameter
function foo(x = 5, y = 5) { }

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

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

38. 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]

39. Destructing Assign
var a, b;!
!
[a, b] = [1, 2];!
//a:1, b:2

40. 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

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

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

43. Class Extends
class 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

44. Class
⚈ No multiple inheritance
⚈ Define property only in constructor

45. Map
⚈ Like object, {…}
⚈ Key, value pair data structure
⚈ Use non-string data as key
⚈ Native object’s key will use toString

46. Map
m = 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

47. Map Methods
clear has
delete keys
entries set
forEach values
get

48. Set
⚈ Like array, […]
⚈ Can’t get value at specific index
⚈ Use for…of

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

50. Set Methods
add forEach
clear has
delete values
entries

51. for…of

52. for...of
⚈ New loop method
⚈ Like CoffeeScript’s for...in
⚈ Used to loop iterable object items

53. Iterable
Array String
Map Set

54. Create Custom
Iterable Object

55. Iterator
Syntax
Use ES6 Today

56. Iterator
⚈ A new interface in ES spec
⚈ User can implement custom iterator
⚈ An object with next method
http://mdn.io/iterator

57. iterator.next
⚈ Return an object with value and done!
⚈ value is next item’s value
⚈ done shows is this iterator finished
⚈ Can’t reuse

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

59. Generator
⚈ Like idMaker
⚈ Generator is a function, generate iterator
⚈ Different invoke will create different iterator,
iterate the same list.

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

61. yield
⚈ yield is generator helper
⚈ Let you easy to create generator

62. yield
function* idMaker(){!
var index = 0;!
while(true)!
yield index++;!
}
http://mdn.io/generator

63. yield
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator

64. yield
⚈ * is the indicator to tell runtime
⚈ yield is return point

65. yield
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
This is a generator

66. First Call
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
return
starts here

67. Second Call
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
return
starts here

68. yield
⚈ Function end will return done: true

69. Iterable
⚈ Have generator function in the object
⚈ Under @@iterator property

70. Iterable
ID = {};!
!
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

71. Iterable Features

72. for…of

73. Comprehension
var ns = [1, 2, 3, 4];!
!
var dbls = [for (i of ns) i*2];!
!
dbls; // [2, 4, 6, 8]
簡約式

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

75. 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]

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

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

78. more…
⚈ Object Literal Extensions
⚈ Proxy
⚈ Modules, Import, Export
⚈ Promise
⚈ Symbol

79. Use ES6 Today
Iterator
ECMAScript 7,8…

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

83. Web

84. ES6 for Web
⚈ Precompile ES6 to ES5
⚈ traceur-compiler
⚈ from Google
⚈ AngularJS 2.0
https://github.com/google/traceur-compiler

86. 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

87. es6-skeleton
⚈ A project seed
⚈ Based on gulp
⚈ browserify, es6ify
⚈ livereload

88. ECMAScript 7,8…
Use ES6 Today
Conclusion

89. ES.future
ES7 ES8
guards macros
contracts
parallel arrays
(SIMD)
event loop concurrency
http://www.2ality.com/2011/09/es6-8.html

90. http://youtu.be/3WgVHE5Augc

91. Type
⚈ First see in ActionScript

92. ActionScript 3.0 Cookbook

93. Type
⚈ TypeScript also has type imply syntax

97. Type in ES.future
⚈ Called guards

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

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

100. 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/

101. Where is new Spec

102. Traceur-Compiler Doc
https://github.com/google/traceur-compiler/wiki/LanguageFeatures

103. ES Wiki
http://wiki.ecmascript.org/doku.php

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

105. ES Wiki
⚈ strawman: pre proposal
⚈ harmony: TC39 approved proposal

106. TC39 Meeting Notes
https://github.com/rwaldron/tc39-notes

107. Conclusion
ECMAScript 7,8…

108. Conclusion
⚈ ES6 is coming
⚈ You can use it today
⚈ Get ready for ES7, 8, 9, 10, 11

109. Q&A