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
Codelicious: Intro to ES2015
Search
Jack Franklin
July 07, 2016
Technology
0
350
Codelicious: Intro to ES2015
Jack Franklin
July 07, 2016
Tweet
Share
More Decks by Jack Franklin
See All by Jack Franklin
Advanced React Meetup: Testing JavaScript
jackfranklin
1
200
Components on the Web: Frontend NE
jackfranklin
1
770
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
PolyConf: Elm for JS Developers
jackfranklin
0
250
JSCamp Romania: Elm for JS Developers
jackfranklin
1
260
Other Decks in Technology
See All in Technology
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
160
[TechNight #86] Oracle GoldenGate - 23ai 最新情報&プロジェクトからの学び
oracle4engineer
PRO
1
210
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
2
450
[2024年10月版] Notebook 2.0のご紹介 / Notebook2.0
databricksjapan
0
1.7k
The 5 Obstacles to Empowered Teams - Twice the Value in Half the Time
mdalmijn
0
200
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
170
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
0
490
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.8k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
140
20250129 Findy_テスト高活用化
dshirae
1
250
CloudWatch Container Insightsを使ったAmazon ECSのリソース監視
umekou
1
140
AWSエンジニアに捧ぐLangChainの歩き方
tsukuboshi
1
310
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
RailsConf 2023
tenderlove
29
980
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Writing Fast Ruby
sferik
628
61k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Language of Interfaces
destraynor
156
24k
Unsuck your backbone
ammeep
669
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Scaling GitHub
holman
459
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
None
@Jack_Franklin
@pusher
ES2015: finished!
https://kangax.github.io/compat-table/es6/
It’s happening! • Edge 14: 90% • Chrome 52 /
Opera 39: 98% • FF 49: 93% • Safari 10: 100% • Node 6: 93%
Arrow Functions
1 [1, 2, 3].map(function(numbers) { 2 return numbers * 2;
3 }); 4 5 [1, 2, 3].map(numbers => numbers * 2);
undefined 'Tom' undefined 'Zoe' 1 var person = { 2
name: 'Jack', 3 friends: ['Tom', 'Zoe'], 4 logFriends: function() { 5 this.friends.forEach(function(f) { 6 console.log(this.name, f); 7 }); 8 } 9 }
'Jack' 'Tom' 'Jack' 'Zoe' 1 var person = { 2
name: 'Jack', 3 friends: ['Tom', 'Zoe'], 4 logFriends: function() { 5 this.friends.forEach(f => { 6 console.log(this.name, f); 7 }); 8 } 9 }
Object Literals
1 var literal = { 2 foo: function() {...}, 3
bar() {...} 4 }
1 var newKey = 'foo'; 2 var newObj = {};
3 newObj[newKey] = true; 4 5 var otherNewObj = { 6 [newKey]: true 7 };
Template Strings
1 var str = '2 + 2 is: ' +
(2 + 2); 2 3 var otherStr = `2 + 2 is: ${2 + 2}`;
1 var str = `they can 2 span multiple 3
4 lines and stuff 5 `;
Destructuring
1 var array = [1, 2, 3]; 2 3 var
[first, ...rest] = array; 4 5 first // 1 6 rest // [2, 3]
1 var person = { 2 name: 'Jack', 3 age:
24 4 }; 5 6 var { name, age } = person; 7 8 name // 'Jack' 9 age // 24
1 var getTweetInfo = function() {...}; 2 3 var {
text, user } = getTweetInfo();
1 var person = { 2 name: { 3 first:
'Jack', 4 last: 'Franklin' 5 } 6 }; 7 8 var { name: { first } } = person; 9 10 first // 'Jack';
1 var person = { 2 name: { 3 first:
'Jack', 4 last: 'Franklin' 5 } 6 }; 7 8 var { name: { first: foo } } = person; 9 10 foo // 'Jack' 11 first // ReferenceError
The rest/spread/splat operator
1 var numbers = [1, 2, 3] 2 var moreNumbers
= [...numbers, 4, 5]; 3 // moreNumbers [1, 2, 3, 4, 5]
Function Arguments
1 function foo(x = 1) { 2 return x; 3
} 4 5 foo() // 1 6 foo(2) // 2
1 function foo(...args) { 2 log('got args', args); 3 }
4 5 function bar() {...}; 6 7 var args = [1, 2, 3]; 8 bar.apply(this, args); 9 bar(...args);
1 function foo(obj) { 2 return obj.x + obj.y; 3
}; 4 5 function foo({ x, y }) { 6 return x + y; 7 }
Classes
1 class Person { 2 constructor(name) { 3 this.name =
name; 4 } 5 6 fullName() { 7 return `Name is ${this.name}`; 8 } 9 } 10 11 var jack = new Person('Jack'); 12 jack.fullName();
Modules
1 // foo.js 2 export default function() { 3 return
2; 4 } 5 6 //main.js 7 import foo from './foo'; 8 foo(); // 2
1 // foo.js 2 function foo() { 3 return 2;
4 } 5 6 export { foo }; 7 8 // main.js 9 import { foo } from './foo'; 10 foo(); // 2
each module has its own scope
static imports and exports
tree shaking
1 // some 3rd party library 2 export function merge()
{...}; 3 export function filter() {...}; 4 export function map() {...}; 5 6 // your app 7 8 import { filter } from 'third-party';
1 // final bundle 2 function filter() {...}; 3 ...your
app code...
const and let
scope
window (global) scope function scope
foo = 2 bar = 3 x = fn baz
= 4 1 var foo = 2; 2 3 function x() { 4 bar = 3; 5 var baz = 4; 6 }
x foo = 1 bar = 2 1 function x()
{ 2 var bar = 2; 3 if (...) { 4 var foo = 1; 5 } 6 }
window (global) scope function scope block scope let const
x bar = 2 foo = 1 baz = 3
1 function x() { 2 var bar = 2; 3 if (...) { 4 let foo = 1; 5 const baz = 3; 6 } 7 }
never var, always let
and maybe even const
1 const x = 2; 2 x = 3; //
NOPE! 3 4 const y = { a: 1 }; 5 y = { b: 1 }; // NOPE! 6 7 y.a = 2; //...yeah 8 delete y.a; //...yeah 9 y.b = 3; //...yeah
so much more! sets, maps, proxies, symbols, generators, new object
APIs
Never again
ES2016 ** operator Array.prototype.includes
Thanks! @Jack_Franklin