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
350
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
860
Rails API
sayanee
5
470
Learning with Open Source
sayanee
3
290
ECMAScript 6 - part 2
sayanee
1
250
Minimalist Designer behind the curious Developer
sayanee
8
360
Responsive Web Design for Beginners
sayanee
9
910
Travel to Balkans + Hungary
sayanee
2
210
Styling with SASS
sayanee
9
560
Create a Cinemgraph
sayanee
2
180
Other Decks in Technology
See All in Technology
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.5k
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
130
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
130
ServiceNow Knowledge Learning Rise up
manarobot
0
190
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
27
5.7k
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
210
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
270
Janus
bkuhlmann
1
490
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
980
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
340
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
120
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
220
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Docker and Python
trallard
33
2.7k
4 Signs Your Business is Dying
shpigford
175
21k
Building Adaptive Systems
keathley
30
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Illustrated Children's Guide to Kubernetes
chrisshort
30
46k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
How STYLIGHT went responsive
nonsquared
92
4.8k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Producing Creativity
orderedlist
PRO
336
39k
Raft: Consensus for Rubyists
vanstee
132
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