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
780
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
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
x86-64 Assembly Essentials
latte72
4
550
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
540
事業を差別化する技術を生み出す技術
pyama86
2
540
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership, regardless of position
madoxten
21
10k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.2k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
850
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
220
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
170
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
820
QAエンジニアが スクラムマスターをすると いいなぁと思った話
____rina____
0
160
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
A Tale of Four Properties
chriscoyier
158
23k
For a Future-Friendly Web
brad_frost
176
9.6k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A better future with KSS
kneath
238
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Into the Great Unknown - MozCon
thekraken
35
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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