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
380
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
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
920
チームの境界をブチ抜いていけ
tokai235
0
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
460
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
190
iOSでSVG画像を扱う
kishikawakatsumi
0
120
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
340
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
570
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
Devoxx BE 2025 Loom lab
josepaumard
0
100
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
190
CSC509 Lecture 05
javiergs
PRO
0
300
Introduce Hono CLI
yusukebe
6
2.8k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Invisible Side of Design
smashingmag
302
51k
4 Signs Your Business is Dying
shpigford
185
22k
Code Review Best Practice
trishagee
72
19k
Side Projects
sachag
455
43k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Scaling GitHub
holman
463
140k
Rails Girls Zürich Keynote
gr2m
95
14k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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