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
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
1k
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
インターフェース設計のコツとツボ
togishima
2
490
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
780
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
230
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
Featured
See All Featured
Visualization
eitanlees
146
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Raft: Consensus for Rubyists
vanstee
137
7k
It's Worth the Effort
3n
184
28k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
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