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
230
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
210
Components on the Web: Frontend NE
jackfranklin
1
780
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
430
Front Trends: Migrating complex software
jackfranklin
1
770
Migrating from Angular to React: Manc React
jackfranklin
1
150
Half Stack Fest: Webpack
jackfranklin
4
500
FullStackFest: Elm for JS Developers
jackfranklin
1
210
Codelicious: Intro to ES2015
jackfranklin
0
350
PolyConf: Elm for JS Developers
jackfranklin
0
260
Other Decks in Technology
See All in Technology
データモデルYANGの処理系を再発明した話
tjmtrhs
0
200
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.5k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
510
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
210
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
MIMEと文字コードの闇
hirachan
2
1.4k
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
160
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Done Done
chrislema
182
16k
Writing Fast Ruby
sferik
628
61k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
4 Signs Your Business is Dying
shpigford
183
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Adopting Sorbet at Scale
ufuk
75
9.2k
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