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
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
360
Claude Codeから我々が学ぶべきこと
oikon48
10
2.8k
AI関数が早くなったので試してみよう
kumakura
0
290
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
22
5.3k
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
370
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.3k
生成AIによるデータサイエンスの変革
taka_aki
0
3k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
220
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
540
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
9
2.2k
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1.2k
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
1
1.3k
Featured
See All Featured
Done Done
chrislema
185
16k
Adopting Sorbet at Scale
ufuk
77
9.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
4 Signs Your Business is Dying
shpigford
184
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
KATA
mclloyd
32
14k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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