Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ECMAScript 6 - part 1
Sayanee
May 12, 2013
Technology
3
340
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
2
720
Rails API
sayanee
5
430
Learning with Open Source
sayanee
3
280
ECMAScript 6 - part 2
sayanee
1
230
Minimalist Designer behind the curious Developer
sayanee
8
340
Responsive Web Design for Beginners
sayanee
9
900
Travel to Balkans + Hungary
sayanee
2
180
Styling with SASS
sayanee
9
520
Create a Cinemgraph
sayanee
2
170
Other Decks in Technology
See All in Technology
家の明るさ制御 / Brightness Control in My House
1024jp
0
140
Oracle Cloud Infrastructure:2022年5月度サービス・アップデート
oracle4engineer
PRO
0
150
XRを取り巻く技術の正体と未来
kajiken_meson
0
140
スクラムマスターの「観察」スキルを掘り下げる / Scrum Fest Niigata 2022
ama_ch
0
850
KubeCon Recap -Platform migration at Scale-
inductor
0
120
Data Warehouse or Data Lake, which one do I choose?
ahana
0
150
動的ルーティング・ゲートウェイ (DRG) 概要
ocise
0
120
IDOLY PRIDEにおけるAssetBundleビルドパイプラインについて
qualiarts
0
350
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
660
新規ゲームのリリース(開発)前からのSRE活動
tmkoikee
1
580
Steps toward self-service operations in eureka
fukubaka0825
0
980
BFFとmicroservicesアーキテクチャ
hirac1220
0
110
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Git: the NoSQL Database
bkeepers
PRO
415
59k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
Facilitating Awesome Meetings
lara
29
3.9k
KATA
mclloyd
7
8.6k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
920
Building Flexible Design Systems
yeseniaperezcruz
310
33k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
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