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
370
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
220
Components on the Web: Frontend NE
jackfranklin
1
800
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
470
Front Trends: Migrating complex software
jackfranklin
1
810
Migrating from Angular to React: Manc React
jackfranklin
1
170
Half Stack Fest: Webpack
jackfranklin
4
540
FullStackFest: Elm for JS Developers
jackfranklin
1
230
PolyConf: Elm for JS Developers
jackfranklin
0
280
JSCamp Romania: Elm for JS Developers
jackfranklin
1
280
Other Decks in Technology
See All in Technology
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
29
13k
ユーザー課題を愛し抜く――AI時代のPdM価値
kakehashi
PRO
1
130
Cloud WANの基礎から応用~少しだけDeep Dive~
masakiokuda
3
110
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
160
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
620
オブザーバビリティ文化を組織に浸透させるには / install observability culture
mackerelio
0
130
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
1
650
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
240
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
210
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
240
生成AIによるデータサイエンスの変革
taka_aki
0
3k
AIに頼りすぎない新人育成術
cuebic9bic
3
320
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Typedesign – Prime Four
hannesfritz
42
2.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Into the Great Unknown - MozCon
thekraken
40
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Visualization
eitanlees
146
16k
KATA
mclloyd
32
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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