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.6k
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
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
150
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
TableauLangchainとは何か?
cielo1985
1
140
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
210
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
330
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
170
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
660
インフラ寄りSREの生存戦略
sansantech
PRO
8
3.2k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
590
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
220
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
YesSQL, Process and Tooling at Scale
rocio
173
14k
BBQ
matthewcrist
89
9.7k
Building Applications with DynamoDB
mza
95
6.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Gamification - CAS2011
davidbonilla
81
5.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Designing Experiences People Love
moore
142
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
For a Future-Friendly Web
brad_frost
179
9.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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