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
190
Components on the Web: Frontend NE
jackfranklin
1
740
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
400
Front Trends: Migrating complex software
jackfranklin
1
730
Migrating from Angular to React: Manc React
jackfranklin
1
140
Half Stack Fest: Webpack
jackfranklin
4
470
FullStackFest: Elm for JS Developers
jackfranklin
1
200
Codelicious: Intro to ES2015
jackfranklin
0
330
PolyConf: Elm for JS Developers
jackfranklin
0
250
Other Decks in Technology
See All in Technology
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
540
難しいから面白い!医薬品×在庫管理ドメインの複雑性と向き合い、プロダクトの成長を支えるための取り組み / Initiatives to Support Product Growth
kakehashi
2
180
Agile in Automotive Industry, puzzles and lights.
hiranabe
1
230
エンジニア向け会社紹介資料
caddi_eng
15
250k
リアルお遍路+SORACOM IoT
ozk009
1
110
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
140
CRTO/CRTL/OSEPの比較・勉強法とAV/EDRの検知実験
chayakonanaika
1
1.1k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1k
より快適なエラーログ監視を目指して
leveragestech
4
1.2k
ナレッジグラフとLLMの相互利用
koujikozaki
0
290
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
320
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
130
Featured
See All Featured
Music & Morning Musume
bryan
46
6k
What's in a price? How to price your products and services
michaelherold
242
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
88
16k
The Language of Interfaces
destraynor
153
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
GraphQLとの向き合い方2022年版
quramy
43
13k
Statistics for Hackers
jakevdp
793
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.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