What is ES6

ES7, ES2015, ES2016, ESNext, Etc?

EcmaScript

The specification behind JavaScript

ES Versions

So...

ES6 and ES2015 are synonymous

They refer to the 6th edition of the ECMAScript

released in 2015.

How are Features Added to the Spec?

TC39

The technical committee behind the specification

Includes people from:

• ECMA International
• Google
• Microsoft
• Yahoo
• Facebook
• AirBNB
• Community Leaders

http://www.ecma-international.org/memento/TC39.htm

https://github.com/tc39

TC39 Process

The five-stage process to add features to the spec

https://tc39.github.io/process-document/

let & const

• block scoping

• single assignment

var i = 911;

for(var i = 0; i<3; i++) {
    console.log(i);
}

console.log("Someone dial " + i);

let & const

Block Scoping

before

https://jsbin.com/gaceli/1/edit?js,console

let i = 911;

for(let i = 0; i<3; i++) {
    console.log(i);
}

console.log("Someone dial " + i);

https://jsbin.com/cusako/1/edit?js,console

let & const

Block Scoping

after

var int = 1,
    str = "String",
    arr = [1, 2, 3, 4],
    obj = {one: 1, two: 2};

int = 2;
console.log(int);

str = "";
console.log(str);

arr.push(5);
console.log(arr);

arr = [];
console.log(arr);

obj.three = 3;
console.log(obj);

obj = {};
console.log(obj);

https://jsbin.com/gatinu/3/edit?js,console

let & const

Single Assignment

before

const int = 1;
const str = "String";
const arr = [1, 2, 3, 4];
const obj = {one: 1, two: 2};

int = 2;
console.log(int);

str = "";
console.log(str);

arr.push(5);
console.log(arr);

arr = [];
console.log(arr);

obj.three = 3;
console.log(obj);

obj = {};
console.log(obj);

http://bit.ly/1PIgToS

let & const

Single Assignment

after

Template Strings

multiline and interpolated variables

var name = "simon";
var product = "drawrings";

console.log("hello my name is " + name 
    + "\nand I like to make " + product);

Multiline & Interpolated Variables

Template Strings

before

const name = "simon";
const product = "drawrings";

console.log(
`hello my name is ${name}
and I like to make ${product}`
);

https://jsbin.com/wegama/2/edit?js,console

Multiline & Interpolated Variables

Template Strings

after

Arrow Functions

• Compact & lambda friendly syntax
• Lexical `this`

var results = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  .map(function(n) {
    return n*n;	
  })
  .map(function(n) {
    return n/2;	
  })
  .filter(function(n) {
    return n%1===0;
  })
  .reduce(function(last, curr) {
	return last + curr;
  }, 0);

Arrow Functions

https://jsbin.com/qidawah/5/edit?js,console

Compact Syntax

before

const results = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  .map(n => n*n)
  .map(n => n/2)
  .filter(n => n%1===0)
  .reduce((last, curr) => last + curr, 0);

https://jsbin.com/yavema/1/edit?js,console

Arrow Functions

Compact Syntax

after

var stack1 = {
    friends: ['bruce', 'matt', 'cory'],
    traitor: 'cory',
    friendsNotTraitors: function() {
        var that = this;
        return this.friends.filter(
            function(t) {
                return that.traitor!==t;   
            }
        );     
    }
};

var stack2 = {
    friends: ['bruce', 'matt', 'cory'],
    traitor: 'cory',
    friendsNotTraitors: function() {
        return this.friends.filter(
            function(t) {
                return this.traitor!==t;   
            }.bind(this)
        );     
    }
};

or

https://jsbin.com/fofivu/3/edit?js,console

stack1.friendsNotTraitors();

stack2.friendsNotTraitors();

Arrow Functions

Lexical this

before

const stack = {
    friends: ['bruce', 'matt', 'cory'],
    traitor: 'cory',
    friendsNotTraitors: function() { 
        return this.friends.filter(t => this.traitor!==t);
    }
};

stack.friendsNotTraitors();

https://jsbin.com/zasiqo/1/edit?js,console

Arrow Functions

Lexical this

after

Enhanced Object Literals

• shorthand prop assignment
• shorthand methods
• computed prop names

var toppings = ["pepperoni", "olives"],
    size = 12,
    time = 60*30;

module.exports = {
    toppings: toppings,
    size: size,
    time: time
};

Shorthand Prop Assignment

Enhanced Object Literals

before

const toppings = ["pepperoni", "olives"];
const size = 12;
const time = 60*30;

export default { toppings, size, time };

Shorthand Prop Assignment

Enhanced Object Literals

after

{
    onClick: function() {
        console.log('i clicked');
    }
};

Shorthand Methods

Enhanced Object Literals

before

{
    onClick() {
        console.log('i clicked');
    }
};

Shorthand Methods

Enhanced Object Literals

after

var name = "Jared",
    obj = {};

obj[name] = "Anderson";

Computed Prop Names

Enhanced Object Literals

before

const name = "Jared"

const obj = {
    [name]: "Anderson"
}

Computed Prop Names

Enhanced Object Literals

after

Enhanced Object Literals

http://bit.ly/1SCiX6p

Destructuring

• array values
• object props
• object props renaming
• deep destructuring
• declarative function arguments
• argument reassignment

var arr = ["zero", "one", "two", "three"];

var one = arr[1];
var three = arr[3];

Destructuring

Array Values

before

const arr = ["zero", "one", "two", "three"];

const [, one, , three] = arr;

Destructuring

Array Values

after

https://jsbin.com/balolaj/2/edit?js,console

var obj = {
    zero: 0,
    one: 1,
    two: 2,
    three: 3,
    four: 4,
    five: 5,
    six: 6,
    seven: 7,
    eight: 8,
    nine: 9
};

var one = obj.one;
var three = obj.three;
var five = obj.five;
var seven = obj.seven;

Destructuring

Object Props

before

const obj = {
    zero: 0,
    one: 1,
    two: 2,
    three: 3,
    four: 4,
    five: 5,
    six: 6,
    seven: 7,
    eight: 8,
    nine: 9
};

const {one, three, five, seven} = obj;

Destructuring

Object Props

after

const obj = {
    zero: 0,
    one: 1,
    two: 2,
    three: 3,
    four: 4,
    five: 5,
    six: 6,
    seven: 7,
    eight: 8,
    nine: 9
};

const {
  one: uno,
  three: tres,
  five: cinco,
  seven: siete
} = obj;

Destructuring

Object Props Renaming

after

https://jsbin.com/cicica/1/edit?js,console

var obj = {
  one: {
    eng: "one",
    spa: "uno",
    int: 1
  },
  two: {
    eng: "two",
    spa: "dos",
    int: 2
  }
};

var spanish1 = obj.one.spa;
var num2 = obj.two.int;

Destructuring

Deep Destructuring

before

const obj = {
    one: {
      eng: "one",
      spa: "uno",
      int: 1
    },
    two: {
      eng: "two",
      spa: "dos",
      int: 2
    }
};

const {
    one: {spa: spanish1},
    two: {int: num2}
} = obj;

Destructuring

Deep Destructuring

after

https://jsbin.com/satagi/1/edit?js,console

function errMsg(err) {
    return "hey "
        + err.recipient
        + ", something "
        + err.severity + " happened."
        + "\nThe message we got is: '"
        + err.message
        + "'\nThe details are: '"
        + err.details
        + "'";
}

Destructuring

Declarative Fn Args

before

const errMsg = ({recipient, severity, message, details}) =>

`hey ${recipient}, something ${severity} happened.
The message we got is: '${message}'
The details are: '${details}'`;

Destructuring

Declarative Fn Args

after

function sayHi({person: p, mood: m}) {
  console.log(`hi ${p}. why so ${m}?`);
}

Destructuring

Argument Reassignment

after

https://jsbin.com/yupaca/1/edit?js,console

Default Arguments

• basic defaults
• destructure defaults
• ++destructure defaults

Default Arguments

Basic Defaults

before

function annoyParents(wheelsArg, round1Arg, round2Arg) {
    var wheels = wheelsArg || "wheels";
    var round1 = round1Arg || "round";
    var round2 = round2Arg || "round";
    var roundAndRound = " " + round1 + " and " + round2;
  
    return "The "
        + wheels
        + " on the bus go"
        + roundAndRound.repeat(3)
        + ".\nthe "
        + wheels
        + " on the bus go"
        + roundAndRound
        + " - all through the town.";
}

Default Arguments

Basic Defaults

after

function annoyParents(wheels="wheels", round1="round", round2="round") {
    const roundAndRound = ` ${round1} and ${round2}`;
  
    return `The ${wheels} on the bus go\
${roundAndRound.repeat(3)}. \
The ${wheels} on the bus go\
${roundAndRound} - all through the town.`;
}

https://jsbin.com/fuyixa/1/edit?js,console

Default Arguments

Destructure Defaults

after

function annoyParents({wheels="wheels", round1="round", round2="round"}) {
    const roundAndRound = ` ${round1} and ${round2}`;
  
    return `The ${wheels} on the bus go\
${roundAndRound.repeat(3)}. \
The ${wheels} on the bus go\
${roundAndRound} - all through the town.`;
}

https://jsbin.com/fotixu/1/edit?js,console

Default Arguments

++Destructure Defaults

after

function annoyParents({
    wheels="wheels",
    round1="round",
    round2="round"
    } = {}
) {
    const roundAndRound = ` ${round1} and ${round2}`;
  
    return `The ${wheels} on the bus go\
${roundAndRound.repeat(3)}. \
The ${wheels} on the bus go\
${roundAndRound} - all through the town.`;
}

https://jsbin.com/yimiqu/1/edit?js,console

Spread

• Arrays
• Objects

Spread

Arrays

before

var argsFromSomewhere = [25, 50, 25];

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

add3Numbers.apply(null, argsFromSomewhere);

Spread

Arrays

after

var argsFromSomewhere = [25, 50, 25];

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

add3Numbers(...argsFromSomewhere);

https://jsbin.com/duyime/1/edit?js,console

Spread

Objects

before

var obj1 = { one: 1, two: 2, three: 2};
var obj2 = { three: 3, four: 4, five: 5};


// The ES6 Way
var combined = Object.assign({}, obj1, obj2);

// most common solution:
// pull in library to merge

// jq
var combined = $.extend({}, obj1, obj2);

// underscore
var combined = _.extend({}, obj1, obj2);

Spread

Objects

after

const obj1 = { one: 1, two: 2, three: 2};
const obj2 = { three: 3, four: 4, five: 5};

const combined = {...obj1, ...obj2};

http://bit.ly/22Vy7w4

Rest Parameters

Create a pipeline function that:

• accepts any value as its first argument
• accepts n number functions as arguments 2, 3, 4, etc...
• pipes the original value through all the functions, left to right.
• returns the result...

Rest Parameters

Contrived Pipeline Example

pipeline(x, fn1, fn2, fn3, fn4, fn5)

Rest Parameters

before

function pipeline () {
    var val = arguments[0],
        fns = Array.prototype.slice.call(arguments, 1);

    return fns.reduce( function(l, c) {
        return c(l);
    }, val);
}

Contrived Pipeline Example

const pipeline = (val, ...fns) =>
  fns.reduce( (l, c) => c(l), val);

Rest Parameters

after

Contrived Pipeline Example

https://jsbin.com/tifacip/1/edit?js,console

Symbols

• unique keys

Symbols

before

var myUniqueKey = "___uniqueish_via_obfuscation__FTL___";

Unique Keys

Symbols

after

const key = Symbol("my-key");

Unique Keys

https://jsbin.com/cakoxa/1/edit?js,console

Modules

Modules

before

// Global variables
window.globalVar = "ew";

// CommonJS+Browserify
module.exports = {}
require('something');


// SystemJS
System.import('main.js');

Modules

after

export const a = "apple";

export function isCool({ likes = [] }) {
    return likes.includes('pizza');
}

export default {
    one: 1,
    three: 3
};

a.js

import {a, isCool} from 'a.js';

b.js

import whateverNameIWant from 'a.js';

c.js

Where Can I Learn More?

Babel

https://babeljs.io/docs/learn-es2015/

Current Stage 1-4 Proposals

https://github.com/tc39/ecma262

Kangax Compat Tables

http://kangax.github.io/compat-table/esnext/

http://kangax.github.io/compat-table/es6/

Mozilla

https://hacks.mozilla.org/category/es6-in-depth/