Hi everyone.

I'm Craig,

and I like warm hugs! 

Work in Wellington

Formerly worked on Touch

Now working on Preview/Tangram/Tractor

I ❤ JavaScript

& Frozen

Craig Spence's

Disney's

Frozen: JavaScript

or

JavaScript is better than people

The ECMAScript 2015 Spec Never Bothered Me Anyway

or

 A brief history

May 1995:

Brendan Eich creates JavaScript in 10 days

June 1997:

The ECMA*-262 spec is published (known as ECMAScript 1)

* European Computer Manufacturer Association

June 1998:

ECMAScript 2 is published!

December 1999:

ECMAScript 3 is published!

2000 - 2008...

December 2009:

ECMAScript 5!

June 2011:

ECMAScript 5.1!

Which brings us to...

ES2015!

DA FUQ?

Arrows:

// ES5

Elsa.on('stress', function () {
    // handle stress (badly);
});

['Anna', 'Hans', 'Sven'].map(function () {
    // ...
});

fetch('https://icecastle/elsa')
.then(function (elsa) {
    // Movie ends early...
})
.catch(function (error) {
    // Drama ensues...
});

// ES2015

Elsa.on('stress', () => {
    // handle stress (badly);
});

['Anna', 'Hans', 'Sven'].map(() => {
    // ...
});

fetch('https://icecastle/elsa')
.then((elsa) => {
    // Movie ends early...
})
.catch((error) => {
    // Drama ensues...
});

Arrows:

// ES2015

this.on('stress', () => {
    this.handleStressBadly;
});

['Anna', 'Hans'].map((character) => {
    this.singWith(character);
});

fetch('https://icecastle/elsa')
.then((elsa) => {
    this.movieEnds();
})
.catch((error) => {
    this.moarDrama();
});

// ES5

let elsa = this;
elsa.on('stress', function () {
    elsa.handleStressBadly;
});

['Anna', 'Hans'].map(function (character) {
    this.singWith(character);
}, this);

fetch('https://icecastle/elsa')
.then(function (elsa) {
    this.movieEnds();
}.bind(this))
.catch(function (error) {
    this.moarDrama();
}.bind(this));

Arrows:

// Arrow functions can get even shorter! Note the missing parens
// around the parameters, and the missing braces around the body,
// and the implicit return for the first statement:
[1, 2, 3, 4].map(x => x * x); // [1, 4, 9, 16]

// Missing parens only works with single parameters though,
// otherwise you need them:
[1, 2, 3, 4].map((element, index) => element * index);
[1, 2, 3, 4].map(() => 1);

// Noop in ES5:
function () { }

// Noop in ES2015:
() => {}

// Constant function in ES5:
function () {
    return 1;
}

// Constant function in ES2015:
() => 1

Classes:

// ES5

function Snowman (name) {
    this.name = name;
}

Snowman.prototype.sayHi = function () {
    return 'Hi everyone! I\'m'
        + this.name;
};

function Olaf () {
    Snowman.call(this, 'Olaf');
}

Olaf.prototype = Object.create(Snowman.prototype);

Olaf.prototype.sayHi = function sayHi() {
    return Snowman.prototype.sayHi.call(this)
        + ', and I like warm hugs';
};

var olaf = new Olaf();
olaf.sayHi();

// ES2015

class Snowman {
    constructor (name) {
        this.name = name;
    }
    
    sayHi () {
        return `Hi everyone. I'm ${this.name}`
    }
}

class Olaf extends Snowman {
    constructor () {
        super('Olaf');
    }

    sayHi () {
        return `${super.sayHi()} and I like warm hugs!` 
    }
}

let olaf = new Olaf;
olaf.sayHi();

Classes:

// ES5

function Snowman (name) {
    this._name = name;

    Object.defineProperty(this, 'name', {
        get: function () {
            return this._name;
        },
        set: function (newName) {
            this._name = newName;
        }
    });
}

// ES2015

class Snowman {
    constructor (name) {
        this._name = name;
    }
    
    get name () {
        return this._name;
    }

    set name (newName) {
        this._name = newName;
    }
}

Destructuring:

// ES5

var princesses = ['Elsa', 'Anna'];
var heirToArendelle = princesses[0];

// or

var heirToArendelle = _.first(princesses);

// ES2015

let princesses = ['Elsa', 'Anna'];
let [heirToArendelle] = princesses;

Destructuring:

// ES5

var frozenFacts = {
    producer: {
        firstName: 'Peter',
        lastName: 'Del Vecho'
    },
    runningTime: '102'
};

var producer = frozenFacts.producer;
var firstName = producer.firstName;
var length = frozenFacts.runningTime;

// ReferenceError:
var directorName = frozenFacts.director.name; 

// ES2015

let frozenFacts = {
    producer: {
        firstName: 'Peter',
        lastName: 'Del Vecho'
    },
    runningTime: '102'
};

let { 
    producer: { firstName },
    runningTime: length
} = frozenFacts;

// No error!
let { director: { name }} = frozenFacts;
// name === undefined

default + rest + spread:

// ES5

function build (what) {
    what = what || 'snowman';
    return what;
}

build(); // 'snowman'

// ES2015

function build (what = 'snowman') {
    return what;
}

build(); // 'snowman'

default + rest + spread:

// ES5

function sweetChoreography (arguments) {
    var guests = Array.prototype.slice.apply(arguments);
    guests.forEach(function (guest) {
        danceWith(guest);
    });
}

sweetChoreography('Hans', 'Duke of Wesselton', 'Trolls');

// ES2015

function sweetChoreography (...guests) {
    guests.forEach(guest => danceWith(guest));
}

sweetChoreography('Hans', 'Duke of Wesselton', 'Trolls');

let + const:

// ES5

// Variable declarations:
var itGo = '';

// Constants:
var BOTHERED_BY_COLD = false;

// ES2015

// Variable declarations:
let itGo = '';

// Constants:
const BOTHERED_BY_COLD = false;

let + const:

// ES5

for (var i = 0; i < 10; i += 1) {
    element.click(function () {
        console.log(i);
    });
}

// 9, 9, 9, 9, 9, 9, 9, 9, 9, 9

// ES2015

for (let i = 0; i < 10; i += 1) {
    element.click(function () {
        console.log(i);
    });
}

// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

let + const:

// ES2015

const ARENDELLE = {
    ruler: 'Elsa'
};

// Doesn't throw error:
ARENDELLE.ruler = 'Hans'; 

// const objects are not immutable:
const ARENDELLE = Object.freeze({
    ruler: 'Elsa'
});

// Now throws:
ARENDELLE.ruler = 'Hans'; 

symbols:

// ES2015

// elsa.js
let conceal = Symbol();

class Elsa {
    constructor (feelings) {
        this[conceal] = feelings;
    }
}

const feelings = 'BIG FEELS';
export default const elsa = new Elsa(feelings);

// app.js
import elsa from 'elsa';

// No way to access feelings (except reflection magic)

symbols:

// ES2015:

// Special symbols:
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];