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
95
Ruby for the Newbie
ambethia
2
120
A naïve introduction to mruby
ambethia
3
730
Other Decks in Programming
See All in Programming
Adding Security to Microcontroller Ruby
sylph01
1
150
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
Try creating your own orderedmap
kazamori
1
280
AppRouter Panel Talk
yosuke_furukawa
PRO
1
520
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
100
ペパボOpenTelemetry革命
pyama86
2
810
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
430
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
Good first issues of TypeProf
mame
2
490
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
230
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
30
6.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building Adaptive Systems
keathley
32
1.9k
Agile that works and the tools we love
rasmusluckow
325
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
How to name files
jennybc
65
94k
The Cost Of JavaScript in 2023
addyosmani
21
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
The Invisible Side of Design
smashingmag
294
49k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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