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
220
Components on the Web: Frontend NE
jackfranklin
1
800
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
460
Front Trends: Migrating complex software
jackfranklin
1
800
Migrating from Angular to React: Manc React
jackfranklin
1
170
Half Stack Fest: Webpack
jackfranklin
4
530
FullStackFest: Elm for JS Developers
jackfranklin
1
220
Codelicious: Intro to ES2015
jackfranklin
0
360
PolyConf: Elm for JS Developers
jackfranklin
0
270
Other Decks in Technology
See All in Technology
開発効率と信頼性を両立する Ubieのプラットフォームエンジニアリング
teru0x1
0
150
Devin(Deep) Wiki/Searchの活用で変わる開発の世界観/devin-wiki-search-impact
tomoki10
0
460
Securing your Lambda 101
chillzprezi
0
290
IIWレポートからみるID業界で話題のMCP
fujie
0
510
「実体」で築く共通認識: 開発現場のコミュニケーション最適化 / Let's Get on the Same Page with Concrete Artifacts: Optimization of Communication in dev teams
kazizi55
0
150
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
170
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
240
DroidKnights 2025 - Jetpack XR 살펴보기: XR 개발은 어떻게 이루어지는가?
heesung6701
1
130
API の仕様から紐解く「MCP 入門」 ~MCP の「コンテキスト」って何だ?~
cdataj
0
170
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
300
原則から考える保守しやすいComposable関数設計
moriatsushi
3
460
Copilot Agentを普段使いしてわかった、バックエンド開発で使えるTips
ykagano
1
1.3k
Featured
See All Featured
Scaling GitHub
holman
459
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Building Adaptive Systems
keathley
43
2.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Become a Pro
speakerdeck
PRO
28
5.4k
Designing for Performance
lara
609
69k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for humans not robots
tammielis
253
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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