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
960
Rails API
sayanee
5
520
Learning with Open Source
sayanee
3
310
ECMAScript 6 - part 2
sayanee
1
270
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
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
12
3.3k
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
130
TROCCO今昔
gtnao
0
210
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
160
OpenTelemetry の Log を使いこなそう
biwashi
5
1k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
3
580
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
260
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Visualization
eitanlees
146
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GitHub's CSS Performance
jonrohan
1031
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Optimizing for Happiness
mojombo
379
70k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Thoughts on Productivity
jonyablonski
69
4.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
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