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
380
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
940
Rails API
sayanee
5
500
Learning with Open Source
sayanee
3
300
ECMAScript 6 - part 2
sayanee
1
260
Minimalist Designer behind the curious Developer
sayanee
8
400
Responsive Web Design for Beginners
sayanee
9
940
Travel to Balkans + Hungary
sayanee
2
220
Styling with SASS
sayanee
9
600
Create a Cinemgraph
sayanee
2
190
Other Decks in Technology
See All in Technology
How to benefit from the latest Keycloak features
ahus1
0
120
越境するプロダクトエンジニアリング
liaoziyang
0
110
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
1.2k
開発者体験を定量的に把握する手法と活用事例
ham0215
0
180
社内でKaggle部を作って初学者育成した話
daikon99
1
220
OSSの実装を参考にBedrockエージェントを作る
moritalous
2
430
AppSheet タスク管理アプリ 中級編
comucal
PRO
0
110
人生を左右する「即答」のススメ: 一瞬の判断を間違えないためにするべきこと
takasyou
10
1.4k
Real World Nix CI/CD編
asa1984
1
190
AWSサービスアップデート2025年2月分
yuobayashi
2
110
AI-Driven-Development-20250310
yuhattor
3
350
最近のSRE支援ニーズ考察 | sogaoh's LT @ Road to SRE NEXT@札幌
sogaoh
PRO
1
190
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
KATA
mclloyd
29
14k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Side Projects
sachag
452
42k
Making Projects Easy
brettharned
116
6.1k
Music & Morning Musume
bryan
46
6.4k
Embracing the Ebb and Flow
colly
84
4.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building Your Own Lightsaber
phodgson
104
6.3k
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