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.2k
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.7k
WAT JavaScript Date
othree
3
1.8k
Modern HTML Email Development
othree
3
2.5k
MRT & GIT
othree
1
1.8k
YAJS.vim and Vim Syntax Highlight
othree
1
2.4k
Web Trends to 2015
othree
4
290
Transducer
othree
9
2.7k
HITCON 11 Photographer
othree
4
450
fetch is the new XHR
othree
6
3.4k
Other Decks in Technology
See All in Technology
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.4k
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
3.3k
【基本】データベース設計
oracle4engineer
PRO
2
180
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
510
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
160
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.2k
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.6k
web-application-security
matsuihidetoshi
1
190
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
180
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.2k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
338
39k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Docker and Python
trallard
35
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Making Projects Easy
brettharned
109
5.5k
Designing for Performance
lara
601
67k
Infographics Made Easy
chrislema
238
18k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Code Reviewing Like a Champion
maltzj
515
39k
How GitHub (no longer) Works
holman
305
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
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