ES2015 & ES2016

Deep Dive

a.k.a ES6 & ES7

Topics

New ES2015 Language Features
Coming ES2016+ Language Features
Focus on stuff we can use every day
Exciting stuff to look forward to

ES?

EcmaScript
JavaScript is an implementation of ES
ES5 in 2009 -> ES2015 in June 2015
New spec every year

ES Stages

Stage 0: just an idea
Stage 1: formal proposal
Stage 2: draft spec
Stage 3: candidate spec
Stage 4: finished spec, two implementations

Babel.js

Babel is built on plugins, different plugins for each feature

Features can be enabled by stage
Or selected language features enabled individually

ES2015 Features

arrow functions, classes, enhanced object literals, template strings, destructuring, default args, rest, spread, let, const, iterators, generators, modules, Map, Set, proxies, symbols, Promises, reflect API, tail calls

Let

How does var's scoping work?

var is function scoped
Variable declarations with var are hoisted by the JS engine

Var

function() {
  a = 2;
  var a;
  console.log(a);
}

Var

function() {
  var a;
  a = 2;
  console.log(a); // 2
}

Var

function() {
  if (false) {
    var a = 2;
  }
  console.log(a); // Reference error?
}

Var

function() {
  var a;
  if (false) {
    a = 2;
  }
  console.log(a); // undefined
}

Let

var is function scoped

let is block scoped
A block is any pair of { }

Let

function() {
  let a = 2;
  {
    let a = 3;
    console.log(a); // 3
  }
  console.log(a); // 2
}

Let - Why?

Principle of Least Privilege

If a variable is not used outside of a block of code, don't expose it

Let - Gotchas

let is not hoisted like var
Because of the way Babel transpiles let, let is hoisted when using Babel

Const

Declares a variable as a constant

Block scoped same as let
Can't share its name with variable or function in the same scope

Const

const VAL = 12345;
const STR = "a constant string";
const VALUES = [1, 2, 3, 4];
const MY_OBJECT = {
  key1: 'value'
};

Const - Gotchas

Reassigning will fail silently in some browsers

Important to use static analysis tools, e.g. ESLint
const is not reassignable, but it is mutable

Const - Mutable

const MY_OBJECT = {
  key1: 'value';
}
// Change key values
MY_OBJECT.key1 = 'otherValue';
//Add new keys
MY_OBJECT.key2 = 'value';

Shorthand object syntax

let obj = {
  // shorthand for attr: attr,
  attr,
  // shorthand for method: function() {...}
  method() {
    return 42;
  }
};

Template Strings

New string syntax using ``

Gives us:
String interpolation
Easy multiline strings

String interpolation

Available in many other languages, Python, Perl, Ruby

let name = 'Dan';
// let string = 'Hi Im ' + name + '.';
let string = `Hi Im ${name}.`;

Multiline strings

let str = `This is a
multiline string`;

Default Arguments

Specify default values for function arguments

Used when no argument is passed in
Or when the argument is undefined

Default Arguments

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

Destructuring

Automatically breaks up arrays and objects for assignment of their contents

Destructuring - Arrays

// without destructuring
let nums = [0, 1, 2];
let zero = nums[0];
let one = nums[1];
let two = nums[2];

Destructuring - Arrays

// with destructuring
let nums = [0, 1, 2];
let [zero, one, two] = nums;

Destructuring - Objects

// without
let obj = { value: 100, word: 'hundred'};
let value = obj.value;
let word = obj.word;

Destructuring - Objects

// with
let obj = { value: 100, word: 'hundred'};
let {value, word} = obj;

Destructuring - Objects

// alternative
let obj = { value: 100, word: 'hundred'};
let { value: num, word: letters} = obj;
console.log(num, letters); // 100 hundred

Spread

A new operator ... that takes an array and separates into its individual values

Concatenating arrays - ES5

var x = [0, 1];
var y = [2, 3];
Array.prototype.push.apply(x, y);
console.log(x); // [0, 1, 2, 3]

Concatenating arrays - Spread

var x = [0, 1];
var y = [2, 3];
x.push(...y);
console.log(x); // [0, 1, 2, 3]

Rest

Is in some ways the reverse of spread

Uses the same operator, but captures multiple arguments of a function into an array

Rest

function rest(first, ...others) {
  console.log(first, others);
}
rest(1, 2, 3, 4);  // 1 [2, 3, 4]

Arguments

Each function has access to a builtin variable arguments

It is an Array-like object containing all the arguments passes in to the function
Rest operator aims to be a more flexible replacement to arguments

Arguments

function args() {
  console.log(arguments);
}
args(1, '2', {}); //  { '0': 1, '1': '2', '2': {} }

Arrow functions

New type of anonymous function

Automatically binds the this context from the current lexical scope
Also provides a cleaner syntax for anonymous functions

Unbound this

function($rootScope) {
  this.name = 'Dan';
  $rootScope.$on('meeting', function() {
    console.log('Hi Im ' + this.name);
  });
}

Poorly bound this

function($rootScope) {
  this.name = 'Dan';
  let that = this;
  $rootScope.$on('meeting', function() {
    console.log('Hi Im ' + that.name);
  });
}

Bound this

function($rootScope) {
  this.name = 'Dan';
  function meet() {
    console.log('Hi Im ' + this.name);
  }
  $rootScope.$on('meeting', meet.bind(this));
}

Arrow functions

function($rootScope) {
  this.name = 'Dan';
  $rootScope.$on('meeting', () => {
    console.log('Hi Im ' + this.name);
  });
}

Arrow functions

Syntax supports two forms of function body

Block bodies
Expression bodies

Arrow functions - Expression bodies

// ES5
let a = array.map(function(x) {
  return x * x;
});
// arrow function with expression body
let b = array.map(x => x * x);
// equivalent to
let c = array.map(x => { return x * x; });

Arrow functions - Gotchas

Arrow functions do not have their own arguments object
To return an object wrap it in parentheses
```
var a = () => ({ x: 1 });
```

Class

Classes have existed in JavaScript as a design pattern for some time

But JS does not have classes, just class-like constructor functions
JS uses a prototype-based inheritance system, rather than class-based inheritance
ES2015 class is mostly syntactic sugar on this design pattern

ES5 Class

// constructor function
function Point(x, y) {
  this.x = x;
  this.y = y;
}
// class methods
Point.prototype.print = function() {
  console.log(this.x + ', ' + this.y);
}

ES2015 Class

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  print() {
    console.log(`${this.x}, ${this.y}`);
  }
}

Differences

There are some differences between class Point and function Point()

class Point can only called using new
class declarations are not hoisted like function

Subclassing

The new class syntax supports subclassing using extends

This also introduces super for calling the base class constructor/methods

Base class

class Point {
  constructor(x, y) {
    this.x = x; this.y = y;
  }
  print() {
    console.log(`${this.x}, ${this.y}`);
  }
}

Subclass

class Point3D extends Point {
  constructor(x, y, z) {
    super(x, y);
    this.z = z;
  }
  print() {
    console.log(`${this.x}, ${this.y}, ${this.z}`);
  }
}

Class

let point = new Point3D(1, 2, 3);
point.x; // 1
point.y; // 2
point.z; // 3
point.print(); // 1, 2, 3
point instanceof Point3D; // true
point instanceof Point; // true

Modules

JavaScript has no built-in module system

Two standards for modules have developed from the JS community
CommonJS modules
AMD modules

CommonJS modules

Synchronous loading modules

Originally used server-side
Dominant implementation is Node.js modules
Recently moving to the browser with tools like Browserify, Webpack

CommonJS modules

// math.js
var square = function(x) { return x*x; };
var pi = 3.14159526;
module.exports = {
  square: square,
  pi: pi
};
// elsewhere
var math = require('math.js');
console.log(math.square(math.pi)); // 9.8696207

AMD modules

Asynchronous loading modules

Designed for the browser
Dominant implementation is RequireJS modules

RequireJS modules

define([
  'jquery',
  'backbone',
  'metrics',
  "modules/session"
],
function($, Backbone, Metrics, Session) {
  ...
});

ES2015 Modules

Aim to provide the benefits of both standards, and none of the drawbacks

Support for synchronous and asynchronous loading
Compact CommonJS-like syntax
Support for static analysis and cyclic dependencies

ES2015 Modules

When creating modules there are two different kinds of exports

Default export
Named exports

Default Export

// lib.js
export default function() {
  ...
}
// elsewhere
import myFunc from 'lib.js';
myFunc();

Named Exports

export var myVar = 12345;
export let myStr = 'important string';
export const pi = 3.14159526;
export function myFunc() {
  ...
}
export class myClass {
  ...
}

Named exports

import {myVar, myStr, myFunc} from 'lib.js';

Mixed Exports

// lib.js
export default function(x) { return x*x; }
export const pi = 3.14159526;
// elsewhere
import square, { pi } from 'lib.js';

Renaming Imports

import {pi as inaccuratePi} from 'lib.js';

Promises

Promises are an approach to dealing with asynchronous computations

They provide a better approach than callback or events for asynchronous programming in JS
Many Promise libraries exists, implementing a spec called Promises/A+
Popular ones include Q, when, bluebird

Promises

Why do we need Promises?

Race conditions between event being triggered and event handler being added
Callback hell

Callback Hell

asyncFunc(function(err, data) {
  anotherAsync(data, function(err2, data2) {
    yetAnotherAsync(data2, function(err3, data3) {
      console('Im in callback hell!');
    });
  });
});

Promises

A Promise represents the result of an asynchronous action that will eventually succeed or fail

Promises exist in one of three states, pending, fulfilled or rejected
Handlers to be called on fulfillment or rejected are attached using then

Promises

const p = new Promise(function(reject, resolve) {
  setTimeout(function() {
    resolve('done!');
  }, Math.random() * 5000)
});

Promises

p.then((result) => {
  console.log(result);
}, (err) => {
  console.log(err);
});

Promise Benefits

A Promise is an object, can be passed around and have handlers attached in multiple places

If the Promise is resolved/rejected before handlers are attached they will still be run on attachment
Highly composable using chaining, Promise.all, Promise.race

Generators

Whenever ever a function is executed in JS, the engine executes the whole function, top to bottom

Run-to-completion
Until now..

Generators

ES2015 defines are a new type of function

```
function*() { ... }
```
This is a special kind of function that returns a Generator

Generators

Generators are a special kind of iterator

Generators do not follow run-to-completion
They can be paused using yield in the Generator
And resumed on the outside by calling next on the Generator

Generators

They also allow 2 way message passing between the generator function and the calling code

Generators

function *gen() {
  yield 1;
  yield 2;
  yield 3;
}
let it = gen();
it.next(); // {value: 1, done: false}
it.next(); // {value: 2, done: false}
it.next(); // {value: 3, done: false}
it.next(); // {value: undefined, done: true}

Generators

function *fib() {
  let x = 0, y = 1;
  while (true) {
    let t = y;
    y = x + t; x = t;
    yield y;
  }
}

Generators

for (let n of fib) {
  if (n > 1000) {
    break;
  }
  console.log(n);
}

Message passing

function *gen(x) {
  let y = yield (x * 2);
  let z = yield (y * 2);
  return z * 2;
}
let it = gen(2);
it.next().value; // 4
it.next(3).value; // 6
it.next(4).value; // 8

ES2016 and beyond

Best to look at the ES proposals based on current stage

Stage 4

Array.prototype.includes

Includes

Seeks to replace indexOf for arrays

indexOf fails to "say what you mean"
indexOf also fails to find NaN because of strict equality

Includes

[1, 2, 3, 5].includes(4); // false
[NaN, 2, 3, 5].includes(NaN); // true

Stage 3

Exponentiation operator, SIMD, async, Object.values/Object.entries, String padding, function parameter trailing commas

Exponentiation

let eight = Math.pow(2, 3);
let eight2 = 2 ** 3;

Async

Async control flow with Promises is much better than callback

But can we do even better?
With Promises + Generators we can!

Async

fetch('/api/data').then((response) => {
  return response.json();
}).then((data) => {
  return fetch(`/api/x/${data.id}`);
})
....
}).catch((err) => {
  console.log(err);
});

Async

Libraries exist that allow us to use Generators to simply the structure of our code

Once such library is Task.js

Async

spawn(function*() {
  try {
    let response = yield fetch('/api/data');
    let data = yield response.json();
    let resp2 = yield fetch(`/api/x/${data.id}`);
    ...
  } catch (err) {
    console.log(err);
  }
});

Async

The async proposal adds this pattern into JS with new keywords:

async function
await

Async

async function() {
  try {
    let response = await fetch('/api/data');
    let data = await response.json();
    let resp2 = await fetch(`/api/x/${data.id}`);
    ...
  } catch (err) {
    console.log(err);
  }
}

Stage 2

function.sent, spread/rest objects

Object Spread

let x = 1;
let y = 2;
let z = {a: 3, b: 4};
let w = {x, y, ...z};
console.log(w); // {x: 1, y: 2, a: 3, b: 4}

Object Rest

let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4};
console.log(x); // 1
console.log(y); // 2
console.log(z); // {a: 3, b: 4}

Stage 1

export-from, decorators, Observable, String.prototype.trimLeft/trimRight, class properties, static class properties, regex iterator, Web Worker shared memory, callable class constructors, System.global

Decorators

Decorators are higher-order functions which modify the decorated class, class property or object literal

Similar to decorators in Python
Decorators use the @ operator and have a name that matches the name of the decorator function

Decorators

function readonly(target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

Decorators

class Point {
  constructor(x, y) {
    this.x = x; this.y = y;
  }
  @readonly
  print() {
    console.log(`${this.x}, ${this.y}`);
  }
}

Decorators

let p = new Point(1, 2);
p.print(); // 1, 2
p.print = () => {
  console.log(`${this.y}, ${this.x}`);
}
// Cannot assign to read only
// property 'print' of [object Object]

Decorators

let o = {
  @readonly
  print() {
    console.log('my object');
  }
};

Decorators

function cartesian(target) {
  target.coordinate = 'cartesian';
}

Decorators

@cartesian
class Point {
  constructor(x, y) { ... }
  print() {
    console.log(`${Point.coordinate}:
                  ${this.x}, ${this.y}`);
  }
}
let p = new Point(1, 2);
console.log(p.print()); // cartesian: 1, 2

Class properties

There are a number of ES proposals that seek to build on the ES2015 class syntax

Class properties and static class properties are one such proposal

Class properties

class Point {
  coordinate = 'cartesian';
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
let p = Point(1, 2);
p.coordinate; // cartesian

Static properties

class Point {
  static coordinate = 'cartesian';
  constructor(x, y) {
    ...
  }
}
Point.coordinate; // cartesian;

Stage 0

const classes, Relationships, String.prototype.at, Structured Clone, weak references, Set/Map.prototype.toJSON, do expressions, Function Bind syntax, private object state

ES2015 & ES2016

Deep Dive

Topics

ES?

ES Stages

Babel.js

Babel is built on plugins, different plugins for each feature

ES2015 Features

Let

How does var's scoping work?

Var

Var

Var

Var

Let

var is function scoped

let is block scoped

A block is any pair of { }

Let

Let - Why?

Principle of Least Privilege

If a variable is not used outside of a block of code, don't expose it

Let - Gotchas

let is not hoisted like var

Because of the way Babel transpiles let, let is hoisted when using Babel

Const

Declares a variable as a constant

Block scoped same as let

Can't share its name with variable or function in the same scope

Const

Const - Gotchas

Reassigning will fail silently in some browsers

Important to use static analysis tools, e.g. ESLint

const is not reassignable, but it is mutable

Const - Mutable

Shorthand object syntax

Template Strings

New string syntax using ``

Gives us:

String interpolation

Easy multiline strings

String interpolation

Available in many other languages, Python, Perl, Ruby

Multiline strings

Default Arguments

Specify default values for function arguments

Used when no argument is passed in

Or when the argument is undefined

Default Arguments

Destructuring

Automatically breaks up arrays and objects for assignment of their contents

Destructuring - Arrays

Destructuring - Arrays

Destructuring - Objects

Destructuring - Objects

Destructuring - Objects

Spread

A new operator ... that takes an array and separates into its individual values

Concatenating arrays - ES5

Concatenating arrays - Spread

Rest

Is in some ways the reverse of spread

Uses the same operator, but captures multiple arguments of a function into an array

Rest

Arguments

Each function has access to a builtin variable arguments

It is an Array-like object containing all the arguments passes in to the function

Rest operator aims to be a more flexible replacement to arguments

Arguments

Arrow functions

New type of anonymous function

Automatically binds the this context from the current lexical scope

Also provides a cleaner syntax for anonymous functions

Unbound this

Poorly bound this

Bound this

Arrow functions

Arrow functions

Syntax supports two forms of function body

Block bodies