USING ESxxxx today?
Max Stoiber – @mxstbr – mxstbr.com
Slide 18
Slide 18 text
TRANSPILING
Max Stoiber – @mxstbr – mxstbr.com
Slide 19
Slide 19 text
Max Stoiber – @mxstbr – mxstbr.com
BABEL
Slide 20
Slide 20 text
Max Stoiber – @mxstbr – mxstbr.com
Slide 21
Slide 21 text
Max Stoiber – @mxstbr – mxstbr.com
Slide 22
Slide 22 text
ES6
Max Stoiber – @mxstbr – mxstbr.com
Slide 23
Slide 23 text
Max Stoiber – @mxstbr – mxstbr.com
let & const
Slide 24
Slide 24 text
Max Stoiber – @mxstbr – mxstbr.com
Block scoped
Slide 25
Slide 25 text
Max Stoiber – @mxstbr – mxstbr.com
if (true) {
var a = 0;
}
console.log(a);
// "0"
Slide 26
Slide 26 text
Max Stoiber – @mxstbr – mxstbr.com
if (true) {
let a = 0;
}
console.log(a);
// "ReferenceError"
Slide 27
Slide 27 text
Max Stoiber – @mxstbr – mxstbr.com
Constants
Slide 28
Slide 28 text
Max Stoiber – @mxstbr – mxstbr.com
var a = 0;
a = 1;
console.log(a);
// "1"
Slide 29
Slide 29 text
Max Stoiber – @mxstbr – mxstbr.com
const a = 0;
a = 1;
// "SyntaxError"
Slide 30
Slide 30 text
Max Stoiber – @mxstbr – mxstbr.com
Blocks
Slide 31
Slide 31 text
Max Stoiber – @mxstbr – mxstbr.com
Replace IIFEs
Slide 32
Slide 32 text
Max Stoiber – @mxstbr – mxstbr.com
(function() {
var a = 0;
}());
console.log(a);
// "ReferenceError"
Slide 33
Slide 33 text
Max Stoiber – @mxstbr – mxstbr.com
{
let a = 0;
}
console.log(a);
// "ReferenceError"
Slide 34
Slide 34 text
Max Stoiber – @mxstbr – mxstbr.com
Template Literals
Slide 35
Slide 35 text
Max Stoiber – @mxstbr – mxstbr.com
Easy String Construction
Slide 36
Slide 36 text
Max Stoiber – @mxstbr – mxstbr.com
var name = "Max";
var twitter = "@mxstbr";
console.log("Find " + name + " on Twitter: " + twitter);
// "Find Max on Twitter: @mxstbr"
Slide 37
Slide 37 text
Max Stoiber – @mxstbr – mxstbr.com
const name = "Max";
const twitter = "@mxstbr";
console.log(`Find ${name} on Twitter: ${twitter}`);
// "Find Max on Twitter: @mxstbr"
Slide 38
Slide 38 text
Max Stoiber – @mxstbr – mxstbr.com
Arrow Functions
Slide 39
Slide 39 text
Max Stoiber – @mxstbr – mxstbr.com
Shorter function declarations
Max Stoiber – @mxstbr – mxstbr.com
Lexical Binding
Slide 43
Slide 43 text
Max Stoiber – @mxstbr – mxstbr.com
function Person(age) {
// this = instance of Person
this.age = age;
setInterval(function growUp() {
this.age++; // Does not refer to the Person instance!
}, 1000);
}
var Max = new Person(19);
Slide 44
Slide 44 text
Max Stoiber – @mxstbr – mxstbr.com
function Person(age) {
// self = instance of Person
var self = this;
self.age = age;
setInterval(function growUp() {
self.age++; // Correctly refers to the Person instance!
}, 1000);
}
var Max = new Person(19);
Slide 45
Slide 45 text
Max Stoiber – @mxstbr – mxstbr.com
function Person(age) {
this.age = age;
setInterval(function growUp() {
this.age++; // Correctly refers to the Person instance!
}.bind(this), 1000); // Bind the Person instance!
}
var Max = new Person(19);
Slide 46
Slide 46 text
Max Stoiber – @mxstbr – mxstbr.com
function Person(age) {
this.age = age;
setInterval(() => { // Does not bind its own “this”!
this.age++; // Correctly refers to the Person instance!
}, 1000);
}
const Max = new Person(19);
Slide 47
Slide 47 text
Max Stoiber – @mxstbr – mxstbr.com
Default Argument Values
Slide 48
Slide 48 text
Max Stoiber – @mxstbr – mxstbr.com
function add(x, y) {
x = x || 0;
y = y || 0;
return x + y;
}
Slide 49
Slide 49 text
Max Stoiber – @mxstbr – mxstbr.com
function add(x = 0, y = 0) {
return x + y;
}
Slide 50
Slide 50 text
Max Stoiber – @mxstbr – mxstbr.com
Object Literals
Slide 51
Slide 51 text
Max Stoiber – @mxstbr – mxstbr.com
function foo() {
console.log("bar");
}
var funcs = {
foo: foo
};
funcs.foo();
// "bar"
Slide 52
Slide 52 text
Max Stoiber – @mxstbr – mxstbr.com
function foo() {
console.log("bar");
}
const funcs = {
foo
};
funcs.foo();
// "bar"
Slide 53
Slide 53 text
Max Stoiber – @mxstbr – mxstbr.com
Destructuring
Slide 54
Slide 54 text
Max Stoiber – @mxstbr – mxstbr.com
Arrays
Slide 55
Slide 55 text
Max Stoiber – @mxstbr – mxstbr.com
var employees = ["Max", "Peter", "Hans"];
var Max = employees[0];
var Peter = employees[1];
var Hans = employees[2];
console.log(Max, Peter, Hans);
// "Max" "Peter" "Hans"
Slide 56
Slide 56 text
Max Stoiber – @mxstbr – mxstbr.com
const employees = ["Max", "Peter", “Hans"];
let [ Max, Peter, Hans ] = employees;
console.log(Max, Peter, Hans);
// "Max" "Peter" "Hans"
Slide 57
Slide 57 text
Max Stoiber – @mxstbr – mxstbr.com
Objects
Slide 58
Slide 58 text
Max Stoiber – @mxstbr – mxstbr.com
var Max = {
name: "Max Stoiber",
occupation: "Developer"
}
var name = Max.name;
var occupation = Max.occupation;
console.log(name, occupation);
// "Max Stoiber" "Developer"
Slide 59
Slide 59 text
Max Stoiber – @mxstbr – mxstbr.com
let Max = {
name: "Max Stoiber",
occupation: "Developer"
}
let { name, occupation } = Max;
console.log(name, occupation);
// "Max Stoiber" "Developer"
Slide 60
Slide 60 text
Max Stoiber – @mxstbr – mxstbr.com
Classes
Slide 61
Slide 61 text
Max Stoiber – @mxstbr – mxstbr.com
Easier OOP
Slide 62
Slide 62 text
Max Stoiber – @mxstbr – mxstbr.com
function Person(age) {
this.age = age;
}
Person.prototype.growUp = function () {
return this.age += 1;
};
var Max = new Person(19);
Max.growUp();
console.log(Max.age);
// "20"
Slide 63
Slide 63 text
Max Stoiber – @mxstbr – mxstbr.com
class Person {
constructor(age) {
this.age = age;
}
growUp() {
this.age += 1;
}
}
const Max = new Person(19);
Max.growUp();
console.log(Max.age);
// "20"