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
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
Let's learn code review
riofujimon
2
640
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
TypeScriptのパフォーマンス改善
yajihum
14
5.1k
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
560
RubyGems on ruby.wasm
kateinoigakukun
0
120
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.9k
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
140
HonoのRPCで真の型安全が欲しかった
kosei28
1
130
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
170
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.7k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
Side Projects
sachag
451
41k
Why Our Code Smells
bkeepers
PRO
331
56k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
4 Signs Your Business is Dying
shpigford
176
21k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Being A Developer After 40
akosma
67
580k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
The Cult of Friendly URLs
andyhume
74
5.7k
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