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
NDC London: Introduction to ES6
Search
Jack Franklin
December 04, 2014
Technology
0
240
NDC London: Introduction to ES6
Jack Franklin
December 04, 2014
Tweet
Share
More Decks by Jack Franklin
See All by Jack Franklin
Advanced React Meetup: Testing JavaScript
jackfranklin
1
220
Components on the Web: Frontend NE
jackfranklin
1
810
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
470
Front Trends: Migrating complex software
jackfranklin
1
810
Migrating from Angular to React: Manc React
jackfranklin
1
170
Half Stack Fest: Webpack
jackfranklin
4
540
FullStackFest: Elm for JS Developers
jackfranklin
1
230
Codelicious: Intro to ES2015
jackfranklin
0
370
PolyConf: Elm for JS Developers
jackfranklin
0
280
Other Decks in Technology
See All in Technology
roppongirb_20250911
igaiga
1
240
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
890
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
1
150
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
210
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Context Engineering - Making Every Token Count
addyosmani
3
58
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Documentation Writing (for coders)
carmenintech
74
5k
Into the Great Unknown - MozCon
thekraken
40
2k
GitHub's CSS Performance
jonrohan
1032
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
None
@Jack_Franklin
None
None
Warning: lots of links!
https:// speakerdeck.com/ jackfranklin
None
None
Make JS better • for complex applications • for libraries
• as a target of code generators
Arrow Functions
var nums = [1,2,3]; nums.map(function(x) { return x * 2;
}); nums.map((x) => x * 2);
var n = [1, 2, 3, 4]; n.some(x => x
% 2 == 0); // true n.filter(x => x % 2 != 0); //=> [1, 3] n.map(x => x * 2) //=> [2, 4, 6, 8]
var n = [1, 2, 3, 4]; n.filter(x => x
% 2 == 0) .map(x => x * x); //=> [4, 16]
var users = […]; n.filter(u => u.isAdmin()) .map(u => u.name);
//=> ['jack', 'james']
n.map(x => x * 2); get('url', (x, y) => {…});
$('#foo').click(() => {…}); parens needed for 0, 2+ arguments
var jack = { name: 'jack', friends: ['james', 'steve'], printFriends:
function() { this.friends.forEach(function(f) { log(this.name, 'knows', f); }) } }; jack.printFriends(); // undefined knows james // undefined knows steve
var jack = { name: 'jack', friends: ['james', 'steve'], printFriends:
function() { this.friends.forEach((f) => { log(this.name, 'knows', f); }) } }; jack.printFriends(); // jack knows james // jack knows steve
var someAjax = { name: 'jack', get: function() { $.getJSON(url,
function(d) { log(this.name, d); }) } };
var someAjax = { name: 'jack', get: function() { $.getJSON(url,(d)
=> { log(this.name, d); }) } };
var nums = [1,2,3]; nums.map((x) => x * 2); //
=> [2, 4, 6] nums.map((x) => { x * 2; }); // => [undefined…]
var nums = [1,2,3]; nums.map((x) => x * 2); //
=> [2, 4, 6] nums.map((x) => { return x * 2; }); // => [2, 4, 6]
http://javascriptplayground.com/blog/ 2014/04/real-life-es6-arrow-fn/ http://javascriptplayground.com/blog/ 2013/01/ecmascript-5-array-methods/
Classes
class Person { constructor(name, age) { this.name = name, this.age
= age } about() { log(this.name, this.age); } };
class Person { constructor(name, age) { this.name = name, this.age
= age } about() { log(this.name, this.age); } };
class Person { constructor(name, age) { this.name = name, this.age
= age } about() { log(this.name, this.age); } };
var jack = new Person('jack', 22); jack.about(); //=> jack 22
class Son extends Person { constructor(name, age) { super(name, age);
this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
class Son extends Person { constructor(name, age) { super(name, age);
this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
class Son extends Person { constructor(name, age) { super(name, age);
this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
class Son extends Person { constructor(name, age) { super(name, age);
this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
class Son extends Person { constructor(name, age) { super(name, age);
this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
Object Literals
var jack = { name: 'jack', age: 22, about() {
log(this.name, this.age); } };
var jack = { ['hello_' + (() => 'world')()]: 42
}; console.log(jack.hello_world); // 42
Template Strings
console.log( `In JS '\n' is a line-feed.` ); In JS
' ' is a line-feed.
var f =`Multiline strings with back ticks in ES6.` console.log(f);
Multiline strings with back ticks in ES6
var name = 'jack'; var age = 22; log(name +
' is ' + age + 'years old'); // this is the worst
var name = 'jack'; var age = 22; `${name} is
${age} years old` // rejoice
Destructuring
var [a, b] = [1, 2]; a == 1 b
== 2
var [a, ,b] = [1, 2, 3]; a == 1
b == 3
var {a, b} = {a: 2, b: 3} a ==
2 b == 3
var {a, b} = {b: 3} a == undefined b
== 3
function getPerson() { return { name: 'jack', age: 22 }
}; var {name, age} = getPerson();
function getPerson() { var name = 'jack'; var age =
22; return { name, age }; }; var {name, age} = getPerson();
Function Arguments
function getInfo(print=false) { if(print) { log(this.name, this.age); } else {
return `${this.name} ${this.age}` } } getInfo();
function getInfo(name='jack') { console.log(name); } getInfo(); // 'jack' getInfo('Bob'); //
'Bob'
function length(...nums) { log(nums.length); }; length(1,2,3); // 3
function length(x, ...rest) { log(x, rest); }; length(1,2,3); // 1,
[2, 3]
function total(x, y, z) { log(x + y + z);
}; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
function total(x, y, z) { log(x + y + z);
}; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
var [a, ...b] = [1, 2, 3, 4]; a //
1 b // [2, 3, 4]
function foo({name, age}) { console.log(name, age); } foo({ name: 'jack',
age: 22}) //=> jack, 22
Scope
Global Scope (window) Function Scope
foo = 2; var fad = 2; function() { bar
= 3; var baz = 4; } foo: 2, fad: 2, bar: 3 baz: 4
function() { if(x) { var foo = 3; } var
baz = 4; } foo: 3, baz: 4
Global Scope (window) Function Scope Block Scope
foo = 2; function() { var baz = 4; if(x)
{ let y = 2; } } foo: 2 baz: 4 y: 2
foo = 2; function() { var baz = 4; if(x)
{ var z = 3; let y = 2; } } foo: 2 baz: 4, z: 3 y: 2
let by default
Modules
var foo = 2; var bar = 3; export {foo,
bar}; import {foo} from 'app' console.log(foo); // 2 app.js foo.js
export var foo = 2; import {foo} from 'app' console.log(foo);
// 2 app.js foo.js
export default function() { return 2; }; import foo from
'app' console.log(foo()); // 2 app.js foo.js
import _ from 'underscore'; import {map} from 'underscore';
if (someThing) { export {foo} } // conditional exports //
not allowed
System .import('jquery') .then(function(jquery) { // can has jQuery })
if(browserSucks) { System .import('jquery') .then(function(jquery) { // can has jQuery
}) }
https://twitter.com/Jack_Franklin/status/538688478624899073
Promises
getJSON('url', function(d) { });
getJSON('url', function(d) { }); getJSON('url').then(function(d) { });
getJSON('url').then((d) => { // data has been got });
getJSON('url', function(d) { getJSON('…', function(e) { // quickly // gets
// horrible }); });
Promise.all([ getJSON('url'), getJSON('other') ]).then((first, second) => { // both finished
});
get('url').then((resp) => { return JSON.parse(resp); }).then((json) => { // actual
JSON here });
get('url') .then(JSON.parse) .then((json) => { // actual JSON here });
var prom = new Promise( function(resolve, reject) { // do
stuff if(everythingOK) { resolve('all worked!'); } else { reject(Error('oh no')); } } );
prom.then(function(resp) { // got here if stuff was OK },
function(err) { // got here if stuff broke });
prom.then(function(resp) { // got here if stuff was OK }).catch(function(err)
{ // got here if stuff broke });
prom.then(function(resp) { // got here if stuff was OK }).catch(function(err)
{ // got here if stuff broke });
var getJSON = function() { return get('url') .then(JSON.parse); } getJSON().then(…).catch(…)
http://www.html5rocks.com/ en/tutorials/es6/promises/ https://github.com/ jakearchibald/es6-promise
Using ES6 today
end of 2014: spec finished June 2015: publication
http://kangax.github.io/compat-table/es6/
chrome://flags
Traceur https://github.com/google/traceur-compiler
6to5 https://github.com/6to5/6to5
ES6 Repl https://chrome.google.com/webstore/detail/es6-repl/ alploljligeomonipppgaahpkenfnfkn
node --harmony
Polyfills https://github.com/paulmillr/es6-shim/
Modules
ES6 module transpiler https://github.com/esnext/es6-module-transpiler http://javascriptplayground.com/blog/2014/06/es6-modules- today/
SystemJS https://github.com/systemjs/systemjs ES6 Module Loader https://github.com/ModuleLoader/es6-module-loader
New projects should use ES6 Modules
http://24ways.org/2014/javascript-modules- the-es6-way/ http://www.2ality.com/2014/09/es6- modules-final.html http://guybedford.com/practical-workflows- for-es6-modules
Maps, Sets, Proxies, Symbols, new Object APIs and so much
more
http://addyosmani.com/blog/tracking- es6-support/ https://github.com/addyosmani/es6- tools http://addyosmani.com/blog/ ecmascript-6-resources-for-the- curious-javascripter/
https://speakerdeck.com/ rauschma/ecmascript-6- whats-next-for-javascript- august-2014
https:// speakerdeck.com/ jackfranklin
@Jack_Franklin javascriptplayground.com