ECMAScript 2015 : Deep Dive

David Leonard

https://github.com/DrkSephy

https://twitter.com/DrkSephy

What I do:

Grad Student at CCNY
Game Developer
Yahoo! Developer Network

Why ES6?

Deep Dive

Tooling
Variables and Scoping
Strings
Destructuring
Parameter Handling
Arrow Functions
Classes
Modules
Generators
Promises

Running ES6

Variables and Scoping

var vs. let / const

var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        var snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false);

// undefined

Credit: https://github.com/venegu

var vs. let / const

var snack = 'Meow Mix';

function getFood(food) {
    var snack;
    
    if (food) {
        snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false);

// undefined

var vs. let / const

let snack = 'Meow Mix';

function getFood(food) {

    if (food) {
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false);

// A

// B

// 'Meow Mix'

Credit: https://github.com/venegu

var vs. let / const

let snack = 'Meow Mix';

function getFood(food) {

    if (food) {
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false);

// A

// B

// 'Meow Mix'

Credit: https://github.com/venegu

IIFE > Blocks

(function () {  
    var food = 'Meow Mix';
}());  
console.log(food);

// Reference Error

IIFE > Blocks

{  
    let food = 'Meow Mix';
} 
console.log(food);

// Reference Error

Scoping

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

Person.prototype.prefixName = function (arr) {
    return arr.map(function (character) {
        return this.name + character;
    });
};

// Cannot read property 'name' of undefined

// A

// B

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

Person.prototype.prefixName = function (arr) {
    var that = this;
    return arr.map(function (character) {
        return that.name + character;
    });
};

// Store this

Scoping

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

Person.prototype.prefixName = function (arr) {
    return arr.map(function (character) {
        return this.name + character;
    }, this);
}

Scoping

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

Person.prototype.prefixName = function (arr) {
    return arr.map(function (character) {
        return this.name + character;
    }.bind(this));
}

Scoping

Arrow Functions

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

Person.prototype.prefixName = function (arr) {
    return arr.map((character) => this.name + character );
}

Arrow Functions

const arr = [1, 2, 3, 4, 5];
const squares = arr.map(x => x * x);

const squares = arr.map(function (x) { return x * x });

// Function Expression

// Terse

Strings

String.prototype.includes

var string = 'food';
var substring = 'foo';
console.log(string.indexOf(substring) > -1);

const string = 'food';
const substring = 'foo';
console.log(string.includes(substring));

// true

// true

String.prototype.repeat

function repeat(string, count) {
    var strings = [];
    while(strings.length < count) {
        strings.push(string);
    }
    return strings.join('');
}

'meow'.repeat(3);

// meowmeowmow

Template Literals: Escaping Characters

var text = "This string contains \"double quotes\" which are escaped."

let text = `This string contains "double quotes" which are escaped.`

Template Literals: Interpolation

const name = 'Tiger';
const age = 13;
console.log(`My cat is named ${name} and is ${age} years old.`);

var name = 'Tiger';
var age = 13;
console.log('My cat is named ' + name + ' and is ' + age + ' years old.');

Credit: https://github.com/venegu

Template Literals: Multi-line Strings

var text = (
  'cat\n' +
  'dog\n' +
  'nickelodeon'
)

var text = [
  'cat',
  'dog',
  'nickelodeon'
].join('\n')

var text = (
  `cat
  dog
  nickelodeon`
)

Template Literals: Expressions

let today = new Date()
let text = `The time and date is ${today.toLocaleString()}`

Template Literals: Multi-line Strings

let book = {
  title: 'Harry Potter and The Sorcercers Stone',
  summary: 'Much magic. Such depth.',
  author: 'J.K. Rowling'
}

let html = `<header>
  <h1>${book.title}</h1>
</header>
<section>
  <div>${book.summary}</div>
  <div>${book.author}</div>
</section>`

Destructuring

var luke = { occupation: 'jedi', father: 'anakin' }
var {occupation, father} = luke;
console.log(occupation); // 'jedi'
console.log(father); // 'anakin'

var [a, b] = [10, 20]
console.log(a); // 10

console.log(b); // 20

Destructuring

function getCoords () {
  return {
    x: 10,
    y: 22
  }
}

var {x, y} = getCoords()
console.log(x); // 10
console.log(y); // 22

Modules

Credit: https://www.flickr.com/photos/lucaohman/3473867313

Exporting in CommonJS

module.exports = 1
module.exports = { foo: 'bar' }
module.exports = ['foo', 'bar']
module.exports = function bar () {}

export default 1
export default { foo: 'bar' }
export default ['foo', 'bar']
export default function bar () {}

Named Exports

module.exports.name = 'David';
module.exports.age = 25;

export var name = 'David';
export var age  = 25;

Exporting in ES6

// math/addition.js
function sumTwo(a, b) {
    return a + b;
}

function sumThree(a, b) {
    return a + b + c;
}

export { sumTwo, sumThree };

Exporting in ES6

export function sumTwo(a, b) {
    return a + b;
}

export function sumThree(a, b) {
    return a + b + c;
}

Exporting default bindings

function sumTwo(a, b) {
    return a + b;
}

function sumThree(a, b) {
    return a + b + c;
}

var api = {
    sumTwo  : sumTwo,
    sumThree: sumThree
}

export default api

Importing Modules

var _ = require('underscore');

import _ from 'underscore';

import { sumTwo, sumThree } from 'math/addition'

import { 
  sumTwo as addTwoNumbers, 
  sumThree as sumThreeNumbers} from
} from 'math/addition'

import * as util from 'math/addition'

Parameters

Default Parameters

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

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

addTwoNumbers(2, 4); // 6
addTwoNumbers(2); // 2
addTwoNumbers(); // 0

Rest Parameters

function logArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

function logArguments(...args) {
    for (let arg of args) {
        console.log(arg);
    }
}

Named Parameters

function initializeCanvas(options) {
    var height = options.height || 600;
    var width  = options.width  || 400;
    var lineStroke = options.lineStroke || 'black';
}

function initializeCanvas(
    { height=600, width=400, lineStroke='black'}) {
        ...
    }

function initializeCanvas(
    { height=600, width=400, lineStroke='black'} = {}) {
        ...
    }

Spread Operator

Math.max(...[-1, 100, 9001, -32]) // 9001

var arr = [1, ...[2,3], 4];
console.log(arr); // [1, 2, 3, 4]

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Classes

Base Classes

function Person(name, age, gender) {
    this.name   = name;
    this.age    = age;
    this.gender = gender;
}

Person.prototype.incrementAge = function () {
    return this.age += 1;
};

Extended Classes

function Personal(name, age, gender, occupation, hobby) {
    Person.call(this, name, age, gender);
    this.occupation = occupation;
    this.hobby = hobby;
}

Personal.prototype = Object.create(Person.prototype);
Personal.prototype.constructor = Personal;
Personal.prototype.incrementAge = function () {
    return Person.prototype.incrementAge.call(this) += 1;
}

Base Classes in ES6

class Person {
    constructor(name, age, gender) {
        this.name   = name;
        this.age    = age;
        this.gender = gender;
    }
    
    incrementAge() {
      this.age += 1;
    }
}

Extended Classes in ES6

class Personal extends Person {
    constructor(name, age, gender, occupation, hobby) {
      super(name, age, gender);
      this.occupation = occupation;
      this.hobby = hobby;
    }
    
    incrementAge() {
      super.incrementAge();
      this.age += 20;
      console.log(this.age);
    }
}

// Calls parent incrementAge()

Symbols

Unique Property Keys

const key = Symbol();
const keyTwo = Symbol();
const object = {};

>> key === keyTwo 
>> false

object.key = 'Such magic.';
object.keyTwo = 'Much Uniqueness'

Symbols as Concepts

const anakin = 'jedi';
const yoda   = 'jedi master';
const luke   = 'jedi';

const anakin = Symbol();
const yoda   = Symbol();
const luke   = Symbol();

Maps

(Hash) Maps in ES5

var map = new Object();
map[key1] = 'value1';
map[key2] = 'value2';

Seems functional, right...?

Get Own Properties

function getOwnProperty(object, propertyKey) {
    return (object.hasOwnProperty(propertyKey) ? object[propertyKey]: undefined);
}

We should be safe...right?

> getOwnProperty({ hasOwnProperty: 'Hah, overwritten'}, 'Pwned');
> TypeError: Propery 'hasOwnProperty' is not a function

Credit: http://memesvault.com/nooo-meme-darth-vader/

Second time is the charm.

function getOwnProperty(object, propertyKey) {
    return (Object.prototype.hasOwnProperty(object, propertyKey) ? object[propertyKey]: undefined);
}

credit: http://deloiz.blogspot.com/2014/01/Pusheen.html

Maps in ES6

let map = new Map();
> map.set('name', 'david');
> map.get('name'); // david
> map.has('name'); // true

// key

// value

Keys can be more than strings!

Arbitrary values as keys

let map = new Map([
    ['name', 'david'],
    [true, 'false'],
    [1, 'one'],
    [{}, 'object'],
    [function () {}, 'function']
]);

for (let key of map.keys()) {
    console.log(typeof key);
    // > string, boolean, number, object, function
};

.entries( )

for (let entry of map.entries()) {
  console.log(entry[0], entry[1]);
}

for (let [key, value] of map.entries()) {
  console.log(key, value);
}

WeakMaps

Classes 101

class Person {
    constructor(age) {
        this.age = age;
    }
    
    incrementAge() {
      this.age += 1;
    }
}

Private data?

Naming Conventions

class Person {
    constructor(age) {
        this._age = age;
    }
    
    _incrementAge() {
      this._age += 1;
    }
}

WeakMaps to the rescue!

(Maybe they're not so weak)

WeakMaps for Privacy

let _age = new WeakMap();
class Person { 
  constructor(age) {
    _age.set(this, age);
  }

  incrementAge() {
    let age = _age.get(this);
      if(age > 90) {
        console.log('Midlife crisis');
      }
  }
}

> const person = new Person(90);
> person.incrementAge(); // 'Midlife crisis'
> Reflect.ownKeys(person); // []

credit: http://wildermuth.com/images/pinky-promise_2.jpg

Promises

Callback Hell

func1(function (value1) {
  func2(value1, function(value2) {
    func3(value2, function(value3) {
      func4(value3, function(value4) {
        func5(value4, function(value5) {
          // Do something with value 5
        });
      });
    });
  });
});

Promises

func1(value1)
  .then(func2(value1) { })
  .then(func3(value2) { })
  .then(func4(value3) { })
  .then(func5(value4) { 
    // Do something with value 5 
  });

Promises

new Promise(resolve => resolve(data))
    .then(result => console.log(data));




new Promise((resolve, reject) => 
    reject(new Error('Failed to fufill Promise')))
    .catch(reason => console.log(reason));

Promises

var fetchJSON = function(url) {  
  return new Promise((resolve, reject) => {
    $.getJSON(url)
      .done((json) => resolve(json))
      .fail((xhr, status, err) => reject(status + err.message));
  });
}

Parallelizing using Promises

var urls = [ 
  'http://www.api.com/items/1234',
  'http://www.api.com/items/4567'
];

var urlPromises = urls.map(fetchJSON);

Promise.all(urlPromises)  
  .then(function(results) {
     results.forEach(function(data) {
     });
  })
  .catch(function(err) {
    console.log("Failed: ", err);
  });

Generators

Syntax

function* sillyGenerator() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
}

var generator = sillyGenerator();
var value = generator.next();
> console.log(value); // { value: 1, done: false }
> console.log(value); // { value: 2, done: false }
> console.log(value); // { value: 3, done: false }
> console.log(value); // { value: 4, done: false }

What about using return?

Return in a Generator

function* sillyGenerator() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    return 5;
}

for(let val of sillyGenerator()) {
    console.log(val); // 1, 2, 3, 4
}

Real Generator Function

function* factorial(){
  let [current, total] = [0, 1];

  while (true){
    yield total;
    current++;
    total = total * current;
  }
}

for (let n of factorial()) {
  console.log(n); 
  if(n >= 100000) {
    break;
  }
}

Writing Sync-Async

function request(url) {
    getJSON(url, function(response) {
        generator.next(response);
    });
}

function* getData() {
    var entry1 = yield request('http://some_api/item1');
    var data1  = JSON.parse(entry1);
    var entry2 = yield request('http://some_api/item2');
    var data2  = JSON.parse(entry2);
}

Not without problems though...

How do we handle errors?
getJSON not in control
Parallelize?

Generators & Promises

function request(url) {
    return new Promise((resolve, reject) => {
        getJSON(url, resolve);
    });
}

Generators & Promises

function iterateGenerator(gen) {
    var generator = gen();
    var ret;
    (function iterate(val) {
        ret = generator.next();
        if(!ret.done) {
            ret.value.then(iterate);
        } else {
            setTimeout(function() {
                iterate(ret.value);
            });
        }
    })(); 
}

Generators & Promises

iterateGenerator(function* getData() {
  var entry1 = yield request('http://some_api/item1');
  var data1  = JSON.parse(entry1);
  var entry2 = yield request('http://some_api/item2');
  var data2  = JSON.parse(entry2);
});

Alternate Solution?

Beyond ES6

Async / Await (ES7)

var request = require('request');
 
function getJSON(url) {

  request(url, function(error, response, body) {
    return body;
  });
}
 
function main() {
  var data = getJSON('http://some_api/item1');
  console.log(data); // Undefined
}
 
main();

Async / Await (ES7)

var request = require('request');
 
function getJSON(url) {
  return new Promise(function(resolve, reject) {
    request(url, function(error, response, body) {
      resolve(body);
    });
  });
}
 
async function main() {
  var data = await getJSON();
  console.log(data); // NOT undefined!
}
 
main();
console.log('The data is: ');

Thank you everyone!

Github: https://github.com/DrkSephy

Blog: http://drksephy.github.io/blog/

LinkedIn: https://www.linkedin.com/in/drksephy

Twitter: https://twitter.com/DrkSephy

ES6 Cheatsheet: https://github.com/DrkSephy/es6-cheatsheet

ECMAScript 2015

By David Leonard

ECMAScript 2015

An overview of ES6 features.

39,434

ECMAScript 2015 : Deep Dive

David Leonard

What I do:

Grad Student at CCNY

Game Developer

Yahoo! Developer Network

Why ES6?

Deep Dive

Tooling

Variables and Scoping

Strings

Destructuring

Parameter Handling

Arrow Functions

Classes

Modules

Generators

Promises

Running ES6

Variables and Scoping

var vs. let / const

var vs. let / const

var vs. let / const

var vs. let / const

IIFE > Blocks

IIFE > Blocks

Scoping

Scoping

Scoping

Scoping

Arrow Functions

Arrow Functions

Strings

String.prototype.includes

String.prototype.repeat

Template Literals: Escaping Characters

Template Literals: Interpolation

Template Literals: Multi-line Strings

Template Literals: Expressions

Template Literals: Multi-line Strings

Destructuring

Destructuring

Destructuring

Modules

Exporting in CommonJS

Named Exports

Exporting in ES6

Exporting in ES6

Exporting default bindings

Importing Modules

Parameters

Default Parameters

Rest Parameters

Named Parameters

Spread Operator

Classes

Base Classes

Extended Classes

Base Classes in ES6

Extended Classes in ES6

Symbols

Unique Property Keys

Symbols as Concepts

Maps

(Hash) Maps in ES5

Seems functional, right...?

Get Own Properties

We should be safe...right?

Second time is the charm.

Maps in ES6

Keys can be more than strings!

Arbitrary values as keys

.entries( )

WeakMaps

Classes 101

Private data?

Naming Conventions

WeakMaps to the rescue!

(Maybe they're not so weak)

WeakMaps for Privacy