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
The ECMAScript formerly known as 6
Search
Kerrick Long
July 31, 2015
Programming
0
1.3k
The ECMAScript formerly known as 6
Kerrick Long
July 31, 2015
Tweet
Share
More Decks by Kerrick Long
See All by Kerrick Long
15 Things You Shouldn't Do In Ember Anymore
kerrick
0
1.1k
CSS Study Group 1
kerrick
0
1.3k
CSS Study Group 2
kerrick
1
1.1k
Services & Component Collaboration
kerrick
0
770
Donate STL #Build4STL Hackathon Keynote
kerrick
0
360
Donate STL
kerrick
0
810
TDD With Ember.js
kerrick
0
1.1k
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
7.9k
Other Decks in Programming
See All in Programming
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
130
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
950
WindowInsetsだってテストしたい
ryunen344
1
190
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
GraphRAGの仕組みまるわかり
tosuri13
8
480
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
460
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualization
eitanlees
146
16k
Writing Fast Ruby
sferik
628
61k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Site-Speed That Sticks
csswizardry
10
660
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Transcript
babeljs.io/repl
The ECMAScript formerly known as 6
KerrickLong Kerrick KerrickLong.com
JS
JS
DOM ECMAScript +
DOM
context.drawImage(new Image(), 0, 0) event.dataTransfer.setData(mime, data) new Worker('thread.js').postMessage(str) navigator.getUserMedia({audio: true})
DOM
DOM ECMAScript +
ECMAScript
ECMAScript for (var i; i < 10; i++) { break;
} (function(x) { return x + 1; })(100) var bareObject = Object.create(null) [1, 2, 3, 4].map(double).reduce(add)
ECMAScript 6
ECMAScript 2015
JavaScript is growing up.
Dwindling use of App Frameworks that compile to JS
Dwindling use of App Frameworks that compile to JS
Dwindling use of Other Languages that compile to JS
Dwindling use of Other Languages that compile to JS
What’s new?
Modules
// app/routes/example.js import Ember from 'ember'; export default Ember.Route.extend();
Modules
// app/utils/func.js export var flatten = _.flatten.bind(_); export var union
= _.union.bind(_); Modules
// app/utils/func.js export var flatten = _.flatten.bind(_); export var union
= _.union.bind(_); export default { flatten: flatten, union: union }; Modules
Modules import Ember from 'ember'; import { flatten, union }
from 'app/utils/func'; export default Ember.Route.extend({ model: function() { return flatten(union([1, 2, 3])); } });
Arrow Functions
Arrow Functions var _this = this; return this.store.find('pages').then(function(pages) { return
pages.map(function(pages, i) { return _this.modelFor('posts').objectAt(i) }); });
Arrow Functions var _this = this; return this.store.find('pages').then(pages => {
return pages.map((pages, i) => { return _this.modelFor('posts').objectAt(i) }); });
Arrow Functions return this.store.find('pages').then(pages => { return pages.map((pages, i)
=> { return this.modelFor('posts').objectAt(i) }); });
Arrow Functions return this.store.find('pages').then(pages => { return pages.map((pages, i)
=> this.modelFor('posts').objectAt(i)); });
Enhanced Object Literals
var foo = 'bar'; var obj = { foo: foo,
model: function(params) { return params; } }; obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model:
function(params) { return params; } }; obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model(params)
{ return params; } }; obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model(params)
{ return params; }, ['id_' + Math.random()]: 'secret' }; Enhanced Object Literals
Destructuring
import Ember from 'ember'; var Route = Ember.Route; var
filename = ‘photo.jpg’.split(‘.')[0]; var ext = ‘photo.jpg’.split('.')[1]; export default Route.extend(); Destructuring
import Ember from 'ember'; var { Route: Route }
= Ember; var [filename, ext] = 'photo.jpg'.split('.'); export default Route.extend(); Destructuring
import Ember from 'ember'; var { Route } =
Ember; var [filename, ext] = 'photo.jpg'.split('.'); export default Route.extend(); Destructuring
Template Strings
confirm('Really delete ' + promotion.name + '?'); Template Strings
confirm(`Really delete ${promotion.name}?`); Template Strings
const code = '<script src="' + src + '">\n' +
'</script>\n' + '<noscript>\n' + '<a href="' + link + '">View</a>\n' + '</noscript>'; Template Strings
const code = `<script src="${src}"> </script> <noscript> <a href="${link}">View</a> </noscript>`;
Template Strings
const and let
function example(isGood) { if (isGood) { var x = 4;
console.log(x); // 4 } console.log(x); // 4 } const and let
function example(isGood) { if (isGood) { const x = 4;
console.log(x); // 4 } console.log(x); // undefined } const and let
function canTransition(isSaving) { const canTransition = true; if (isSaving) {
canTransition = false; // Error: already set. } return canTransition; } const and let
function canTransition(isSaving) { let canTransition = true; if (isSaving) {
canTransition = false; } return canTransition; } const and let
Promises
Promise States Pending Fulfilled Rejected } Settled
getJSON onFulfilled onRejected getJSON onFulfilled onRejected
$.ajax(config) .then(onFulfilled, onRejected) Lies, all LIES!
var promise = getJSON('/comments'); somethingElse(); promise.then(onFulfilled, onRejected); Promise.prototype.then
JavaScript Promises Thinking Sync in an Async World then
JS