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
Tomorrow's Javascript, Today.
Search
Jason L Perry
March 02, 2016
Programming
0
91
Tomorrow's Javascript, Today.
A Crash Course in ES2015 and ES2016 JavaScript given at The Iron Yard.
Jason L Perry
March 02, 2016
Tweet
Share
More Decks by Jason L Perry
See All by Jason L Perry
Advanced JS Crash Course
ambethia
1
320
Intro to Javascript
ambethia
1
96
Ruby for the Newbie
ambethia
2
120
A naïve introduction to mruby
ambethia
3
730
Other Decks in Programming
See All in Programming
ペパボOpenTelemetry革命
pyama86
2
1.1k
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
Jetpack Composeとデザインシステム
rmakiyama
0
230
Good first issues of TypeProf
mame
4
600
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
220
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
110
Open standards for building event-driven applications in the cloud
meteatamel
0
230
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
640
The test code generator using static analysis and LLM
mikik0
1
150
TypeScriptのパフォーマンス改善
yajihum
14
5.1k
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
4.6k
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Visualization
eitanlees
137
14k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Rails Girls Zürich Keynote
gr2m
91
13k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
4 Signs Your Business is Dying
shpigford
176
21k
A designer walks into a library…
pauljervisheath
201
23k
Transcript
1
Tomorrow's JavaScript, Today. 2
Audience 3
What is "ECMAScript?" 4
Ecma International 5
6
Other implementations and dialects 4 ActionScript 4 UnityScript 4 JerryScript
7
Features 8
let & const Forget var. 9
(function() { for (var i = 0; i < 2;
i++) { // ... } console.log(i); })(); // > 2 10
(function() { for (let i = 0; i < 2;
i++) { // ... } console.log(i); })(); // ! Uncaught ReferenceError: i is not defined 11
const PHI = 1.618; 12
13
Assignment Destructuring 14
var numbers = [42, Math.PI * 2]; var life =
numbers[0]; var tau = numbers[1]; 15
const [life, ταυ] = [42, Math.PI * 2]; // life
=== 42 // ταυ === 6.283185 16
const numbers = { life: 42, ταυ: Math.PI * 2
}; let { life, ταυ } = numbers; // life === 42 // ταυ === 6.283185 17
18
const numbers = { life: 42, ταυ: Math.PI * 2
}; let { universe, τ } = numbers; // universe === 42 // τ === 6.283185 19
Template Literals 20
'single' "double" `backticks` 21
String Interpolation 22
const q = 'questions'; const a = 'answers'; let s
= `Sometimes the ${q} are complicated and the ${a} are simple.`; 23
24
var q = 'questions'; var a = 'answers'; var s
= 'Sometimes the ' + q + ' are complicated and the ' + a + ' are simple.'; 25
26
Multiline Strings 27
const l = `Unless someone like you cares a whole
awful lot, Nothing is going to get better. It's not.` 28
var l = 'Unless someone like you cares a whole
awful lot,\n Nothing is going to get better.\n It\'s not.'; 29
var l = 'Unless someone like you cares a whole
awful lot,\n' + ' Nothing is going to get better.\n' + " It's not."; 30
31
Spread Operator (...) 32
let colors = ['Red', 'Blue']; let words = ['One', 'Two',
...colors]; 33
function fish() { for (var i = 0; i <
arguments.length; i++) { console.log(arguments[i], 'fish.'); } } fish(...words); // > One fish. // > Two fish. // > Red fish. // > Blue fish. 34
35
fish.apply(null, words); 36
37
Arrow Functions 38
const numbers = [42, 665]; numbers.map((n) => { return n
* ταυ; }); 39
numbers.map((n) => return n * ταυ); 40
function fish(words) { this.subject = 'fish.'; words.forEach(function (word) { console.log(word,
this.subject); }.bind(this)); } 41
function fish(words) { this.subject = 'fish.'; words.forEach((word) => console.log(word, this.subject));
} 42
43
Default Parameter Values 44
function increase(number, increment) { increment = increment || 1; return
number + increment; } increase(41, 624); // 665 increase(41); // 42 45
function increase(number, increment = 1) { return number + increment;
} increase(41, 624); // 665 increase(41); // 42 46
Rest Parameters (...) 47
const feed = (monster, ...numnums) { nomnoms.forEach((nom) => monster.eat(nom)); };
48
function feed(monster) { var nomnoms = Array.prototype.slice.call(arguments, feed.length); nomnoms.forEach(function (nom)
{ monster.eat(nom); }); }; 49
New String APIs 50
Including, but not limited to: 4 String.prototype.startsWith() 4 String.prototype.endsWith() 4
String.prototype.contains() 4 String.prototype.repeat() 4 String.prototype.normalize() 51
New Array APIs 52
Including, but not limited to: 4 Array.prototype.find() 4 Array.prototype.findIndex() 4
Array.prototype.fill() 4 Array.prototype.includes() (ES2016) 53
Array.from() 54
let inputs = document.querySelectorAll('form input'); for (var i = 0;
i < inputs.length; i++) { inputs[i].disable = true; } 55
let inputs = document.querySelectorAll('form input'); Array.from(inputs).forEach((el) => el.disable = true);
56
57
Array.of() 58
let data = [42, 665]; let copy = new Array(...data);
copy // [42, 665] 59
let data = 42; let copy = new Array(...data); copy
// [] 60
61
let data = 42; let copy = Array.of(...data); copy //
[42] 62
Binary and Octal Literal Notation 63
console.log(0x10, 0x2A); // > 16 42 64
console.log(0b10, 0b101010); // > 2 42 console.log(0o10, 0o52); // >
8 42 65
Object Literals 66
let data = '.uǝɹpןıɥɔ ǝʇǝןosqo ǝɹɐ sʇןnpɐ'; let msg =
{ id: 42, data } { id: 42, data: '.uǝɹpןıɥɔ ǝʇǝןosqo ǝɹɐ sʇןnpɐ' } 67
let msg = { id: 42, data, read() { this.data.flip()
} } 68
Classes 69
class Member { constructor(givenName, familyName, rank = 1) { //
super() this.givenName = givenName; this.familyName = familyName; } promote() { this.rank++; } get displayName() { return `${this.givenName} ${this.familyName} (${'*'.repeat(rank)})`; } } let member = new Member('Jason', 'Perry'); member.promote(); console.log(member.displayName); // > "Jason Perry (**)" 70
Modules 71
import React from 'react'; const App = React.createClass({ propTypes: {
title: React.PropTypes.string }, // ... }); export default App; 72
import { Component, PropTypes } from 'react'; class App extends
Component { static propTypes = { title: PropTypes.string } // ... } class Menu extends Component { // ... } export { App, Menu }; import ReactDOM from 'react-dom'; import { App } from './components'; ReactDom.render(App, document.findElementById('root')); 73
Making Use of ES2015, in, er... 2016. 74
Current Browser Support 75
Transpilers 76
4 Babel 4 Traceur 4 TypeScript 4 CoffeeScript 4 JSX
Transformer 77
Babel 78
npm install -g babel-cli 79
babel index.js -o public/main.js 80
babel-node --presets es2015 app.js 81
Configuring Babel 6 82
{ "presets": ["es2015", "react", "stage-0"], "env": { "development": { "plugins":
[ ["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }] }] ] } } } 83
84
What didn't we cover? 85
4 for...of iteration 4 Promise 4 Symbol 4 Map &
Set Collections 4 Comprehensions 4 Module loaders 4 Proxy & Reflection APIs 4 Subclassable Built-ins 4 async/await (ES2016) 4 Generators (ES2016) 4 Decorators (ES2016) 4 Better Unicode support 4 New Math & Number APIs 86
Resources 4 http://exploring js.com 4 https://babeljs.io/docs/learn-es2015/ 4 https://nodejs.org/en/docs/es6/ 4 http://kangax.github.io/compat-table
4 http://www.2ality.com/2015/04/numbers-math- es6.html 87
@ambethia 88
89