Exploring ES6

Exploring ES6
Max Stoiber - @mxstbr

View Slide

Max Stoiber
Max Stoiber – @mxstbr – mxstbr.com
Freelance Front-End Developer
@mxstbr
Co-Organiser of the React Vienna Meetup

View Slide

ES6? ES2015? ESxxxx?

View Slide

TC39

View Slide

ES5: 2009

View Slide

ES6: 2015

View Slide

~6 YEARS!

View Slide

➡ ES6 TOO LARGE
~6 YEARS!

View Slide

YEARLY RELEASES

View Slide

STAGES

View Slide

STAGE 0: STRAWMAN
STAGE 1: PROPOSAL
STAGE 2: DRAFT
STAGE 3: CANDIDATE
STAGE 4: FINISHED

View Slide

USING ESxxxx today?

View Slide

TRANSPILING

View Slide

BABEL

View Slide


View Slide

ES6

View Slide

let & const

View Slide

Block scoped

View Slide

if (true) {
var a = 0;
}
console.log(a);
// "0"

View Slide

if (true) {
let a = 0;
}
console.log(a);
// "ReferenceError"

View Slide

Constants

View Slide

var a = 0;
a = 1;
console.log(a);
// "1"

View Slide

const a = 0;
a = 1;
// "SyntaxError"

View Slide

Blocks

View Slide

Replace IIFEs

View Slide

(function() {
var a = 0;
}());
console.log(a);
// "ReferenceError"

View Slide

{
let a = 0;
}
console.log(a);
// "ReferenceError"

View Slide

Template Literals

View Slide

Easy String Construction

View Slide

var name = "Max";
var twitter = "@mxstbr";
console.log("Find " + name + " on Twitter: " + twitter);
// "Find Max on Twitter: @mxstbr"

View Slide

const name = "Max";
const twitter = "@mxstbr";
console.log(`Find ${name} on Twitter: ${twitter}`);
// "Find Max on Twitter: @mxstbr"

View Slide

Arrow Functions

View Slide

Shorter function declarations

View Slide

var obj = {
hello: function(name) {
console.log("Hello", name);
}
}
obj.hello("world");
// "Hello world"

View Slide

const obj = {
hello: (name) => {
console.log(`Hello ${name}`);
}
}
obj.hello("world");
// "Hello world"

View Slide

Lexical Binding

View Slide

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);

View Slide

// self = instance of Person
var self = this;
self.age = age;
self.age++; // Correctly refers to the Person instance!
}, 1000);
}

View Slide

this.age = age;
this.age++; // Correctly refers to the Person instance!
}.bind(this), 1000); // Bind the Person instance!
}

View Slide

this.age = age;
setInterval(() => { // Does not bind its own “this”!
this.age++; // Correctly refers to the Person instance!
}, 1000);
}
const Max = new Person(19);

View Slide

Default Argument Values

View Slide

function add(x, y) {
x = x || 0;
y = y || 0;
return x + y;
}

View Slide

function add(x = 0, y = 0) {
return x + y;
}

View Slide

Object Literals

View Slide

function foo() {
console.log("bar");
}
var funcs = {
foo: foo
};
funcs.foo();
// "bar"

View Slide

function foo() {
console.log("bar");
}
const funcs = {
foo
};
funcs.foo();
// "bar"

View Slide

Destructuring

View Slide

Arrays

View Slide

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"

View Slide

const employees = ["Max", "Peter", “Hans"];
let [ Max, Peter, Hans ] = employees;
console.log(Max, Peter, Hans);
// "Max" "Peter" "Hans"

View Slide

Objects

View Slide

var Max = {
name: "Max Stoiber",
occupation: "Developer"
}
var name = Max.name;
var occupation = Max.occupation;
console.log(name, occupation);
// "Max Stoiber" "Developer"

View Slide

let Max = {
name: "Max Stoiber",
occupation: "Developer"
}
let { name, occupation } = Max;
console.log(name, occupation);
// "Max Stoiber" "Developer"

View Slide

Classes

View Slide

Easier OOP

View Slide

this.age = age;
}
Person.prototype.growUp = function () {
return this.age += 1;
};
Max.growUp();
console.log(Max.age);
// "20"

View Slide

class Person {
constructor(age) {
this.age = age;
}
growUp() {
this.age += 1;
}
}
const Max = new Person(19);
Max.growUp();
console.log(Max.age);
// "20"

View Slide

let & const
Blocks
Template Literals
Arrow Functions
Default Argument Values
Object Literals
Destructuring
Classes

View Slide

@mxstbr

View Slide

Exploring ES6

Exploring ES6

Max Stoiber

More Decks by Max Stoiber

Other Decks in Technology

Featured

Transcript