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 - part 1
Search
Sayanee
May 12, 2013
Technology
3
400
ECMAScript 6 - part 1
block scoping, classes, modules, destructuring, default parameters
Sayanee
May 12, 2013
Tweet
Share
More Decks by Sayanee
See All by Sayanee
Podcasting with Jekyll
sayanee
1
970
Rails API
sayanee
5
530
Learning with Open Source
sayanee
3
310
ECMAScript 6 - part 2
sayanee
1
280
Minimalist Designer behind the curious Developer
sayanee
8
420
Responsive Web Design for Beginners
sayanee
9
960
Travel to Balkans + Hungary
sayanee
2
230
Styling with SASS
sayanee
9
620
Create a Cinemgraph
sayanee
2
200
Other Decks in Technology
See All in Technology
AI開発ツールCreateがAnythingになったよ
tendasato
0
110
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.3k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
220
2025年夏 コーディングエージェントを統べる者
nwiizo
0
120
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
320
サンドボックス技術でAI利活用を促進する
koh_naga
0
190
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
270
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
520
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
140
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
2
290
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
400
roppongirb_20250911
igaiga
0
140
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
54k
Navigating Team Friction
lara
189
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Into the Great Unknown - MozCon
thekraken
40
2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Scaling GitHub
holman
463
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
ecmascript 6 today! www.sayan.ee Sunday, 12 May, 13
Sunday, 12 May, 13
1995 birth Sunday, 12 May, 13
1995 1999 birth standardised Sunday, 12 May, 13
1995 1999 2005 birth standardised es3 js1.5 Sunday, 12 May,
13
1995 1999 2005 2013 birth standardised es3 js1.5 es6 js2.0
harmony Sunday, 12 May, 13
es6 modules block scoping generators proxies binary data string templates
destructuring rest args name objects hash table weak maps comprehension classes Sunday, 12 May, 13
es6 modules block scoping destructuring classes google traceur features use
today! Sunday, 12 May, 13
block scoping - let now var jsFuture = "es6"; (function
() { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); }()); es6 Sunday, 12 May, 13
block scoping - let now var jsFuture = "es6"; (function
() { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); }()); // var jsFuture; // jsFuture = es5 es6 Sunday, 12 May, 13
var jsFuture = "es6"; (function () { if (!jsFuture) {
let jsFuture = "es5"; } console.log(jsFuture); // jsFuture = es6 }()); block scoping - let now var jsFuture = "es6"; (function () { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); }()); // var jsFuture; // jsFuture = es5 es6 variables are block scoped Sunday, 12 May, 13
block scoping - const now var LATEST_IE = 11; LATEST_IE
= 6; console.log( 'I now have IE' + LATEST_IE); Sunday, 12 May, 13
block scoping - const now var LATEST_IE = 11; LATEST_IE
= 6; console.log( 'I now have IE' + LATEST_IE); es6 const LATEST_IE = 11; LATEST_IE = 6; console.log( 'I now have IE' + LATEST_IE); variables are read-only Sunday, 12 May, 13
classes now es6 var Language = function(config) { this.name =
config.name; this.founder = config.founder; this.year = config.year; }; Language.prototype.summary = function() { return this.name + " was created by " + this.founder + " in " + this.year; }; // extending Language? Sunday, 12 May, 13
classes now es6 google traceur var Language = function(config) {
this.name = config.name; this.founder = config.founder; this.year = config.year; }; Language.prototype.summary = function() { return this.name + " was created by " + this.founder + " in " + this.year; }; // extending Language? class Language { constructor(name, founder, year) { this.name = name; this.founder = founder; this.year = year; } summary() { return this.name + " was created by " + this.founder + " in " + this.year; } } class MetaLanguage extends Language { constructor(x, y, z, version) { super(x, y, z); this.version = version; } } extendable code Sunday, 12 May, 13
modules now es6 google traceur var circle = (function() {
"use strict"; var pi = 3.141; function area(radius) { return "Area of Circle with radius " + radius + " is " + (pi * radius * radius); } function circumference(radius) { return "Circumference of Circle with radius " + radius + " is " + (2 * pi * radius); } return Object.preventExtensions(Object.create(null, { pi: { get: function() { return pi; }, enumerable: true }, area: { get: function() { return area; }, enumerable: true }, circumference: { get: function() { return circumference; }, enumerable: true } })); }).call(this); module circle { export var pi = 3.141; export function area(radius) { return "Area of Circle with radius " + radius + " is " + (pi * radius * radius); } export function circumference(radius) { return "Circumference of Circle with radius " + radius + " is " + (2 * pi * radius); } } console.log( circle.area(3) ); console.log( circle.circumference(2) ); classes can be instantiated as objects while modules cannot Sunday, 12 May, 13
// Variable Swapping var a = 'Brisbane', b = 'Singapore',
temp; temp = b; b = a; a = temp; // Multiple-Variable returns function jsEngines() { return ['V8', 'SpiderMonkey', 'Trident']; } var chrome = jsEngines()[0], firefox = jsEngine()[1], ie = jsEngine()[2]; destructuring now Sunday, 12 May, 13
// Variable Swapping var a = 'Brisbane', b = 'Singapore',
temp; temp = b; b = a; a = temp; // Multiple-Variable returns function jsEngines() { return ['V8', 'SpiderMonkey', 'Trident']; } var chrome = jsEngines()[0], firefox = jsEngine()[1], ie = jsEngine()[2]; destructuring now es6 google traceur // Variable Swapping var [a, b] = ['Brisbane', 'Singapore']; console.log('I bought plane ticket ' + a + '-' + b + ' for CampJS'); [a,b] = [b,a]; console.log('oops!! I meant, I bought plane ticket ' + a + '-' + b + ' for CampJS'); // Multiple-Variable returns function jsEngines() { return ['V8', 'SpiderMonkey', 'Trident']; } var [chrome, firefox, ie] = jsEngines(); Sunday, 12 May, 13
compatibility table firefox chrome Sunday, 12 May, 13
online repl Sunday, 12 May, 13
standards documentation Sunday, 12 May, 13
other resources Sunday, 12 May, 13
Sunday, 12 May, 13