Default Parameters

Old Way

function increment(x, step) {
    if(typeof step === "undefined") {
        step = 1;
    }

    return x + step;
}
                            

Default Parameters

ES6 Way

function increment(x, step = 1) {
    return x + step;
}

increment(3) == 4
increment(3, 10) == 13
                            

Default Parameters

Even Expressions

function insertLog(title, time = Date.now()) {
    ...
}
                            

Better Object Literals

Old Way

var firstname = "John", lastname = "Connor";

var obj = {
    firstname : firstname,
    lastname: lastname,

    toString: function() {
         return this.firstname + ' ' + this.lastname;
    }
};

obj["id_" + getId()] = 42;
                            

Better Object Literals

ES6 Way

                                
var firstname = "John", lastname = "Connor";

var obj = {
    firstname,  // => firstname: firstname
    lastname,

    toString() {
         return this.firstname + ' ' + this.lastname;
    },

    [ "id_" + getId() ]: 42
};
                            

Template Strings

Typical String Concatenation

var piecesPerPie = 6;
var numberOfPies = 3;

console.log('There are ' + numberOfPies + ' pies, so we have ' + 
            (piecesPerPie * numberOfPies) + ' pieces.');
                                        

Template Strings

BACKQUOTE instead of quotes

Template Strings

Using ES6 template strings

var piecesPerPie = 6;
var numberOfPies = 3;

console.log(`There are ${numberOfPies} pies, so we have \
    ${piecesPerPie * numberOfPies} pieces.`);
                                

Template Strings

Multiline Strings

function renderPerson(person) { return `
<dl>
  <dt>First</dt> <dd>${person.first}</dd>
  <dt>Last</dt> <dd>${person.last}</dd>
</dl>
`;
}

renderPerson({first: 'Brian', last: 'Genisio'});
                            

Arrow Functions

Typical Functions

Arrow Functions

ES6 Way

Arrow Functions

var func = () => "";
var instance = new func(); // TypeError: func is not a constructor
                            

func.prototype; // undefined

Rest Parameters

function sum(...numbers) {
  var sum = 0;
  numbers.forEach(number => {
    sum += number;
  });
  return sum;
}

sum(1, 2, 3); // == 6
sum(); // == 0
                            

Rest Parameters

Rest Parameters and Spread

function sum(head, ...tail) {
    if(!tail.length) return head;
    return head + sum(...tail);
}

sum(1, 2, 3); // == 6
sum(); // == 0
                            

Destructuring Assignment

Array Destructuring

var [a, b] = [1,2];
// a == 1, b == 2

var [a, b] = [b, a];
// a == 2, b == 1

function getArray(){
    return [1,2,3,4];
}

var [a,,c,d] = getArray();
// a == 1, c == 3, d == 4
                            

Destructuring Assignment

Object Destructuring

var {firstname: fn, lastname: ln} = 
                {firstname: 'Bruce', lastname: 'Wayne'};
// fn == 'Bruce', ln == 'Wayne'

function getResult() {
    return {
        result: 1234,
        error: null
    };
}

var {result, error} = getResult();
// result == 1234, error == null
                            

Destructuring Assignment

Mixed and Nested

let

Typical Function Scopes

function fnScoped() {
    if(true) {
        var zed = 'alive'; // zed is "hoisted" to the function block
    }

    if(true) {
        console.log('zed is ' + zed); // 'zed is alive'
    }
}
                            

let

New ES6 Block Scoping

if(true) {
    let zed = 'alive';
}

console.log('zed is ' + zed); // ReferenceError: zed is not defined
                            

let

Typical Function Scopes

for(var i = 0; i < 10; i++) {
    var button = $('<button>Button #' + i + '</button>');
    button.click(function() { alert(i); });
    $('body').append(button);
}
                            

let

What is happening

var i;
for(i = 0; i < 10; i++) {
    var button = $('<button>Button #' + i + '</button>');
    button.click(function() { alert(i); });
    $('body').append(button);
}
// i == 10
// button.click => alert(i);
                            

let

Using Block Scopes

for(let i = 0; i < 10; i++) {
    let button = $('<button>Button #' + i + '</button>');
    button.click(function() { alert(i); });
    $('body').append(button);
}
                            

const

const MAX_ITEMS = 30;

// Syntax error: missing initialization
const NAME;

if (condition) {
    const BASE_URL = 'http://www.yahoo.com';
    ...
}

// BASE_URL isn't accessible here
                            

const

const foo = {};
foo.prop = 123; // OK, the object is mutable
foo = {}; // TypeError

const bar = [];
bar.push('abc'); // OK, the array is mutable
                            

for-of

Old Style Loops

var arr = [1,2,3,4];

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

arr.forEach(function(){ console.log(i); });
                            

for-of

Loop over arrays, generators, iterators

let arr = [1, 2, 3, 4];

for(let i of arr){
    console.log(i);
}

// 1, 2, 3, 4
                            

Classes

Classic OOP Programming in JavaScript

Classes

OOP Solutions before ES6

Classes

class in ES6

class Person {
    constructor(name) { 
        this.name = name; 
    }

    hi() {
        return `Hello ${this.name}`;
    }
}

let p = new Person('Walter');
p.hi(); // Hello Walter
                            

Classes

class inheritance in ES6

class Employee extends Person {
    constructor(name, title) {
        super.constructor(name);
        this.title = title;
    }
    
    hi() {
        return `${super.hi()}, the ${this.title}`;
    }
}

let p = new Employee('W. White', 'Teacher');
p.hi(); // Hello W. White, the Teacher
                            

Classes

{
    let transformObject = x => x;

    let inst = new MyClass(); // ReferenceError

    // Note the expression in the `extends` clause
    class MyClass extends transformObject(Object) {
    }
}
                            

Modules

Typical File Separation

<script src="lib/math.js"></script>
<script src="lib/jquery.js"></script>

<script>
    $('#pi').text(math.sum(math.pi, math.pi));
</script>
                            

Asynchronous Module Definition (AMD)

Complicated Syntax / Asynchronous Loading / Main Use in Browsers

CommonJS Modules

Compact Syntax / Synchronous Loading / Main Use on Server

Modules

ES6 Modules (Synchronous)

export function sum(x, y) {
  return x + y;
}
export const PI = 3.141593;
                            

import * as math from "lib/math";
import {jQuery as $} from "lib/jquery";
    
$('#pi').text(math.sum(math.PI, math.PI));
                            

Modules

ES6 Modules (Asynchronous)

System.import('lib/math').then(math => {
    $('#pi').text(math.sum(math.PI, math.PI));
});
                            

Generators

function* generatorFunction() {
    yield 1;
    yield 2;
}

let genObj = generatorFunction();

genObj.next(); // { done: false, value: 1 }
genObj.next(); // { done: false, value: 2 }
genObj.next(); // { done: true }
                            

Generators

Generators

Using for-of loop

function* gen() {
    yield 1;
    yield 2;
}

for(let i of gen()){
  console.log(i);
}
// 1, 2
                            

Generators

Traversing a Tree

function* traverse(node) {
    if (Array.isArray(node)) { // node
        for(let i=0; i < node.length; i++) {
            yield* traverse(node[i]); 
        }
    } else {
        yield node; // leaf
    }
}

const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
for(let x of traverse(tree)) {
    console.log(x);
}
                            

Generators

Pausing a function

function* longRunningTask() {
    // do something
    yield; // pause
    // do something
    yield; // pause
}

let task = longRunningTask();

while(!task.next().done) {
    console.log('Next Step...');
}
console.log('Done.');
                            

Generators

Callback Hell

$.ajax(url, {
    success: function(data) {
        $('#result').html(data);
        var status = $('#status').html('Download complete.');
        status.fadeIn({
            complete: function(){
                setTimeout(function(){
                    status.fadeOut();
                }, 2000);
            }
        });
    }
});
                            

Generators

No callback hell!

Flat async code using Promises

taskjs - http://taskjs.org

import spawn from "http://taskjs.org/es6-modules/task.js";

spawn(function*() {
    var data = yield $.ajax(url);
    $('#result').html(data);
    var status = $('#status').html('Download complete.');
    yield status.fadeIn().promise();
    yield sleep(2000);
    status.fadeOut();
});
                            

Map / Set

WeakMap / WeakSet

String methods

Array methods

Math, Number Methods

Proxy

Promise

...

How to use ES6?

Build with Transpilers

Run with Transpilers

Use Shims/Polyfills

How to use ES6?

6to5 Transpiler

How to use ES6?

6to5 Command line

How to use ES6?

Run with Transpiler

Fiddle About with ES6

http://6to5.org/repl

Fiddle About with ES6

ES6 Repl Chrome Extension

Real-world Usage of ES6

• AngularJS 2.0

  Superheroic JavaScript MVW Framework

• EmberJS

  A framework for creating ambitious web applications.

• DOMtastic

  Small & fast DOM and event library for modern browsers.

• Reapp

  Make beautiful hybrid apps that feel great with React, Webpack and ES6.

• Koa

  Expressive middleware for node.js using generators to make web applications.