Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ECMAScript 6
Search
othree
July 18, 2014
Technology
26
4.3k
ECMAScript 6
talk at COSCUP 2014 (
http://coscup.org/2014/
)
othree
July 18, 2014
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
1.8k
WAT JavaScript Date
othree
3
1.9k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.6k
Web Trends to 2015
othree
4
310
Transducer
othree
9
2.8k
HITCON 11 Photographer
othree
4
460
fetch is the new XHR
othree
6
3.4k
Other Decks in Technology
See All in Technology
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
830
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
Fargateを使った研修の話
takesection
0
110
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
560
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
150
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
Forget efficiency – Become more productive without the stress
ufried
0
110
物価高なラスベガスでの過ごし方
zakky
0
370
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Unsuck your backbone
ammeep
668
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
KATA
mclloyd
29
13k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Making Projects Easy
brettharned
115
5.9k
It's Worth the Effort
3n
183
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Transcript
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-coffee… ntust phd candidate
History Syntax
1996 1997 1998 1999 History JavaScript 1.0 JScript 1.0 JavaScript
1.1 JScript 2.0 JScript 3.0 JavaScript 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 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;
None
` ⚈ 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]
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.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
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
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.
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 here
Second Call function* idMaker(){! var index = 0;! while(index <
6)! yield index++;! } http://mdn.io/generator return starts here
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;! //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…
None
http://kangax.github.io/compat-table/es6/
None
Web
ES6 for Web ⚈ Precompile ES6 to ES5 ⚈ traceur-compiler
⚈ from Google ⚈ AngularJS 2.0 https://github.com/google/traceur-compiler
None
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 contracts parallel 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
None
None
None
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
Q&A