0
ECMAScript 6
othree coscup
https://github.com/voodootikigod/logo.js
Self Intro
@othree https://blog.othree.net
twitter web standards murmur
flickr photo guy for confs
github html5.vim, tern-c...
History
Syntax
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...
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 Edi...
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...
New in JavaScript
https://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!
v...
Arrow Function
// Single expression!
var foo = (x) => x*x!
!
// Multiple expression!
var foo = (x) => {!
let y = x * 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} = getPO...
Destructing and Spread
[a, ...b] = [1, 2, 3, 4, 5];!
//a:1, b:[2,3,4,5]
Class
class Counter {!
constructor() {!
this.count = 0;!
}!
tick() {!
this.count++;!
}!
get count() {!
return this.count;!...
Class Extends
class People extends Counter {!
constructor(people) {!
this.people = people;!
for (let p in people) {!
this....
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 toStri...
Map
m = new Map();!
m.set(true, 'T');!
m.set(false, 'F');!
!
m.size; //2!
!
m.get(true); //"T"!
m.get(false); //"F"!
!
m.g...
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/iter...
iterator.next
⚈ Return an object with value and done!
⚈ value is next item’s value

⚈ done shows is this iterator finished
...
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,
i...
Generator
function 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...
Second Call
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
return
start...
yield
⚈ Function end will return done: true
Iterable
⚈ Have generator function in the object
⚈ Under @@iterator property
Iterable
ID = {};!
!
ID['@@iterator'] = idMaker;!
//or use Symbol!
ID[Symbol.iterator] = idMaker;!
!
for (id of ID) {!
id;...
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, ...
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-com...
in Develop
⚈ Need watch and compile when file changes
⚈ Use gulp to watch
⚈ gulp-traceur or es6ify to compile
⚈ https://git...
es6-skeleton
⚈ A project seed
⚈ Based on gulp
⚈ browserify, es6ify
⚈ livereload
ECMAScript 7,8…
Use ES6 Today
Conclusion
ES.future
ES7 ES8
guards macros
contracts
parallel arrays
(SIMD)
event loop concurrency
http://www.2ality.com/2011/09/es6-...
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...
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
Q&A
ECMAScript 6
ECMAScript 6
ECMAScript 6
ECMAScript 6
ECMAScript 6
ECMAScript 6
ECMAScript 6
Upcoming SlideShare
Loading in...5
×

ECMAScript 6

543

Published on

talk at COSCUP 2014

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
543
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "ECMAScript 6"

  1. 1. ECMAScript 6 othree coscup
  2. 2. https://github.com/voodootikigod/logo.js
  3. 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. 4. History Syntax
  5. 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. 6. Standardization ⚈ Standard script language running on browser ⚈ Host by ECMA
  7. 7. ECMA歐洲電腦製造商協會
  8. 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. 9. History ⚈ Browser War ⚈ ES3 most supported ⚈ ES4 abandoned ⚈ ES5 current ⚈ ES6 talking today 1999 2009 2014
  10. 10. ES3 ⚈ Most supported ⚈ IE6, 7, 8
  11. 11. ES4 ⚈ Flash, ActionScript ⚈ Abandoned
  12. 12. ES5 ⚈ From 3.1 ⚈ Strict mode ⚈ More solid spec
  13. 13. What is ES Now ⚈ ECMAScript is spec ⚈ JavaScript is implementation by Mozilla ⚈ IE’s: JScript ⚈ Host by ECMA International
  14. 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. 15. New in JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript
  16. 16. ES6 ⚈ Next world wide web scripting language ⚈ Lots of new feature ⚈ Also called ECMAScript Harmony
  17. 17. Q&A ⚈ May I use today
  18. 18. Q&A ⚈ May I use today ⚈ Yes ⚈ Google is using (AngularJS 2.0)
  19. 19. ES5 You May Not Know
  20. 20. http://youtu.be/UTEqr0IlFKY
  21. 21. ES6 Features
  22. 22. Major Features Module Class Iterator Syntax
  23. 23. Syntax History Iterator
  24. 24. let ⚈ Block scope local variable http://mdn.io/let
  25. 25. let {! let foo = 100;! foo; // 100! }! ! foo; //undefined
  26. 26. let for (let i = 0; i < len; i++) {! // blah! }
  27. 27. const const foo = 100;! foo; // 100! ! foo = 101;! ! foo; // 100
  28. 28. Template Literals var name = 'world';! ! var greeting = `hello ${name}`;! ! greeting; //hello world;
  29. 29. ` ⚈ Grave accent ⚈ Back tick ⚈ Shell: execute command in between
  30. 30. Arrow Function var square = (x) => {! return x * x;! };! ! var square2 = x => x * x; http://mdn.io/arrow
  31. 31. Arrow Function // Empty function body! var foo = (x) => {}! ! // Single parameter! var foo = x => {}! ! // No parameter! var foo = () => {}! ! // More parameters! var foo = (x, y) => {}
  32. 32. Arrow Function // Single expression! var foo = (x) => x*x! ! // Multiple expression! var foo = (x) => {! let y = x * x;! // need return! return y * x;! }
  33. 33. Arrow Function ⚈ Auto return result of single expression ⚈ Lexical this , like CoffeeScript
  34. 34. Default Parameter function foo(x = 5, y = 5) { }
  35. 35. Rest Parameters function foo(x = 5, ...rest) {! rest;! }! ! foo(1, 2, 3, 4, 5, 6);! // [2,3,4,5,6]
  36. 36. Spread Operator function f(x, y, z) { }! var args = [0, 1, 2];! ! f.apply(null, args);! ! f(...args);
  37. 37. 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]
  38. 38. Destructing Assign var a, b;! ! [a, b] = [1, 2];! //a:1, b:2
  39. 39. 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
  40. 40. Destructing and Spread [a, ...b] = [1, 2, 3, 4, 5];! //a:1, b:[2,3,4,5]
  41. 41. Class class Counter {! constructor() {! this.count = 0;! }! tick() {! this.count++;! }! get count() {! return this.count;! }! }
  42. 42. 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
  43. 43. Class ⚈ No multiple inheritance ⚈ Define property only in constructor
  44. 44. Map ⚈ Like object, {…} ⚈ Key, value pair data structure ⚈ Use non-string data as key ⚈ Native object’s key will use toString
  45. 45. 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
  46. 46. Map Methods clear has delete keys entries set forEach values get
  47. 47. Set ⚈ Like array, […] ⚈ Can’t get value at specific index ⚈ Use for…of
  48. 48. Set s = new Set();! s.add('A');! s.add('B');! s.add('C');! ! for (v of s) {! console.log(v);! }! // A, B ,C
  49. 49. Set Methods add forEach clear has delete values entries
  50. 50. for…of
  51. 51. for...of ⚈ New loop method ⚈ Like CoffeeScript’s for...in ⚈ Used to loop iterable object items
  52. 52. Iterable Array String Map Set
  53. 53. Create Custom Iterable Object
  54. 54. Iterator Syntax Use ES6 Today
  55. 55. Iterator ⚈ A new interface in ES spec ⚈ User can implement custom iterator ⚈ An object with next method http://mdn.io/iterator
  56. 56. iterator.next ⚈ Return an object with value and done! ⚈ value is next item’s value ⚈ done shows is this iterator finished ⚈ Can’t reuse
  57. 57. Iterator var it = idMaker();! ! console.log(it.next().value);! console.log(it.next().value);! console.log(it.next().value);
  58. 58. Generator ⚈ Like idMaker ⚈ Generator is a function, generate iterator ⚈ Different invoke will create different iterator, iterate the same list.
  59. 59. Generator function idMaker() {! var index = 0;! return {! next: function () {! return {! value: index++,! done: false! };! }! };! }
  60. 60. yield ⚈ yield is generator helper ⚈ Let you easy to create generator
  61. 61. yield function* idMaker(){! var index = 0;! while(true)! yield index++;! } http://mdn.io/generator
  62. 62. yield function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator
  63. 63. yield ⚈ * is the indicator to tell runtime ⚈ yield is return point
  64. 64. yield function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator This is a generator
  65. 65. First Call function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator return starts here
  66. 66. Second Call function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator return starts here
  67. 67. yield ⚈ Function end will return done: true
  68. 68. Iterable ⚈ Have generator function in the object ⚈ Under @@iterator property
  69. 69. 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
  70. 70. Iterable Features
  71. 71. for…of
  72. 72. Comprehension var ns = [1, 2, 3, 4];! ! var dbls = [for (i of ns) i*2];! ! dbls; // [2, 4, 6, 8] 簡約式
  73. 73. CoffeeScript Syntax arr = [1, 2, 3, 4];! ! res = (x for x in arr);
  74. 74. 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]
  75. 75. Conditional Comprehension var ns = [1, 2, 3, 4];! ! [for (i of ns) if (i % 2) i];! //[1, 3]
  76. 76. Comprehension for Iterator var ns = [1, 2, 3, 4];! ! (for (i of ns) if (i % 2) i);! //iterator with values [1, 3]
  77. 77. more… ⚈ Object Literal Extensions ⚈ Proxy ⚈ Modules, Import, Export ⚈ Promise ⚈ Symbol
  78. 78. Use ES6 Today Iterator ECMAScript 7,8…
  79. 79. http://kangax.github.io/compat-table/es6/
  80. 80. Web
  81. 81. ES6 for Web ⚈ Precompile ES6 to ES5 ⚈ traceur-compiler ⚈ from Google ⚈ AngularJS 2.0 https://github.com/google/traceur-compiler
  82. 82. 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
  83. 83. es6-skeleton ⚈ A project seed ⚈ Based on gulp ⚈ browserify, es6ify ⚈ livereload
  84. 84. ECMAScript 7,8… Use ES6 Today Conclusion
  85. 85. ES.future ES7 ES8 guards macros contracts parallel arrays (SIMD) event loop concurrency http://www.2ality.com/2011/09/es6-8.html
  86. 86. http://youtu.be/3WgVHE5Augc
  87. 87. Type ⚈ First see in ActionScript
  88. 88. ActionScript 3.0 Cookbook
  89. 89. Type ⚈ TypeScript also has type imply syntax
  90. 90. Type in ES.future ⚈ Called guards
  91. 91. let x :: Number = 37;! ! function f(p :: Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
  92. 92. let x :: Number = 37;! ! function f(p :: Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
  93. 93. 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/
  94. 94. Where is new Spec
  95. 95. Traceur-Compiler Doc https://github.com/google/traceur-compiler/wiki/LanguageFeatures
  96. 96. ES Wiki http://wiki.ecmascript.org/doku.php
  97. 97. Spec Draft http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
  98. 98. ES Wiki ⚈ strawman: pre proposal ⚈ harmony: TC39 approved proposal
  99. 99. TC39 Meeting Notes https://github.com/rwaldron/tc39-notes
  100. 100. Conclusion ECMAScript 7,8…
  101. 101. Conclusion ⚈ ES6 is coming ⚈ You can use it today ⚈ Get ready for ES7, 8, 9, 10, 11
  102. 102. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×