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
360
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
790
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
450
Front Trends: Migrating complex software
jackfranklin
1
800
Migrating from Angular to React: Manc React
jackfranklin
1
160
Half Stack Fest: Webpack
jackfranklin
4
520
FullStackFest: Elm for JS Developers
jackfranklin
1
220
PolyConf: Elm for JS Developers
jackfranklin
0
270
JSCamp Romania: Elm for JS Developers
jackfranklin
1
270
Other Decks in Technology
See All in Technology
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
730
AIオンボーディングとAIプロセスマイニング
nrryuya
5
1.3k
CSS polyfill とその未来
ken7253
0
140
Oracle Database オプティマイザ・ヒントの活用
oracle4engineer
PRO
1
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
AIに実況させる / AI Streamer
motemen
3
1.4k
Things you never dared to ask about LLMs — v2
glaforge
1
500
継続戦闘能⼒
sansantech
PRO
0
220
GitHub Coding Agent 概要
kkamegawa
1
1.5k
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Docker and Python
trallard
44
3.4k
Practical Orchestrator
shlominoach
188
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Gamification - CAS2011
davidbonilla
81
5.3k
What's in a price? How to price your products and services
michaelherold
245
12k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building an army of robots
kneath
306
45k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Adopting Sorbet at Scale
ufuk
76
9.4k
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