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
380
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
230
Components on the Web: Frontend NE
jackfranklin
1
810
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
480
Front Trends: Migrating complex software
jackfranklin
1
810
Migrating from Angular to React: Manc React
jackfranklin
1
180
Half Stack Fest: Webpack
jackfranklin
4
550
FullStackFest: Elm for JS Developers
jackfranklin
1
240
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
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
120
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
350
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.3k
Where will it converge?
ibknadedeji
0
200
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
270
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
110
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
120
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
290
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
360
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Unsuck your backbone
ammeep
671
58k
Speed Design
sergeychernyshev
32
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Agile that works and the tools we love
rasmusluckow
331
21k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Fireside Chat
paigeccino
40
3.7k
RailsConf 2023
tenderlove
30
1.2k
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