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.5k
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
2k
WAT JavaScript Date
othree
3
2k
Modern HTML Email Development
othree
3
2.7k
MRT & GIT
othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.8k
Web Trends to 2015
othree
4
320
Transducer
othree
9
3k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Technology
See All in Technology
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
580
OPENLOGI Company Profile for engineer
hr01
1
37k
Rubyの国のPerlMonger
anatofuz
3
730
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
400
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
Lambda management with ecspresso and Terraform
ijin
2
140
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1k
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
650
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
120
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
300
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
120
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
Featured
See All Featured
Scaling GitHub
holman
461
140k
It's Worth the Effort
3n
185
28k
4 Signs Your Business is Dying
shpigford
184
22k
BBQ
matthewcrist
89
9.8k
Automating Front-end Workflow
addyosmani
1370
200k
Designing for humans not robots
tammielis
253
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Designing Experiences People Love
moore
142
24k
RailsConf 2023
tenderlove
30
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Become a Pro
speakerdeck
PRO
29
5.5k
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