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
470
Front Trends: Migrating complex software
jackfranklin
1
810
Migrating from Angular to React: Manc React
jackfranklin
1
180
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
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
150
BtoBプロダクト開発の深層
16bitidol
0
360
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
890
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
280
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
1k
自動テストのコストと向き合ってみた
qa
0
190
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
How to achieve interoperable digital identity across Asian countries
fujie
0
120
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Documentation Writing (for coders)
carmenintech
75
5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
GitHub's CSS Performance
jonrohan
1032
460k
It's Worth the Effort
3n
187
28k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Fireside Chat
paigeccino
40
3.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Building Adaptive Systems
keathley
43
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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