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
370
Donate STL
kerrick
0
810
TDD With Ember.js
kerrick
0
1.1k
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
8k
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.4k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
300
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.7k
Build your own WebP codec in Swift
kishikawakatsumi
2
860
CSC305 Lecture 02
javiergs
PRO
1
260
Learn CPU architecture with Assembly
akkeylab
1
1.3k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
410
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
520
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
670
パフォーマンスチューニングで Web 技術を深掘り直す
progfay
18
4.8k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
600
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
4 Signs Your Business is Dying
shpigford
185
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Cult of Friendly URLs
andyhume
79
6.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Cost Of JavaScript in 2023
addyosmani
53
9k
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