AGENDA

@boyney123

Promises

Arrow functions

Consts

Let

Modules

String Templates

Destructuring

Parameters

Classes

Transpilation

Enhanced Object Literals

WHO'S USING ES6?

@boyney123

HOW CAN I USE ES6

@boyney123

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

HOW CAN WE USE ES6 TODAY?

@boyney123

TRANSPILATION

@boyney123

ES6 : TRANSPILATION

Traceur

TypeScript

@boyney123

@boyney123

WHOS USING BABELJS

@boyney123

ES6 : LET

LET

@boyney123

The let statement declares a block scope local variable, optionally initializing it to a value.

if (x > y) { let gamma = 12.7 + y; i = gamma * x;}

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

ES6 : LET

@boyney123

ES6 : LET - CODE EXAMPLES

@boyney123

ES6 : LET

CONST

@boyney123

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

const API_URL = “http://www.some-api-url.co.uk”;

ES6 : CONST

@boyney123

ES6 : CONST - CODE EXAMPLES

@boyney123

ES6 : LET

MODULES

@boyney123

ES6 : MODULES

COMMONJS AMD

var $ = require('jquery');exports.myExample = function () {};

define(['jquery'] , function ($) { return function () {};});

Common on browserCommon on server

The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with.

@boyney123

Named Exports - Several per module

ES6 : TYPES OF MODULES

Default Exports - One per module

@boyney123

ES6 : MODULES - CODE EXAMPLES

@boyney123

CLASSES

@boyney123

Syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

class Person { constructor(firstname, surname) { this.firstname = firstname; this.surname = surname; }}

To declare a class, you use the class keyword with the name of the class ("Person" here).

ES6 : CLASSES

@boyney123

ES6 : CLASSES - CODE EXAMPLES

@boyney123

ES6 : LET

OBJECT

@boyney123

var obj = { // Shorthand for ‘handler: handler’ handler,

// Methods toString() { // Super calls return "d " + super.toString(); },

//get propertyget property() {},

//set propertyset property(value) {},

// Computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42};

ES6 : OBJECT

@boyney123

In JavaScript, parameters of functions default to undefined. However, in some situations it might be useful to set a different default value. This is where default parameters can help.

function multiply(a, b) { b = typeof b !== 'undefined' ? b : 1;

return a*b;}

multiply(5); // 5

ES6 : DEFAULT PARAMETERS

function multiply(a, b = 1) { return a*b;}

multiply(5); // 5

ES5 example

ES6 example

@boyney123

ES6 : LET

ARROW FUNCTIONS

@boyney123

An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target).

Arrow functions are always anonymous.

var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium"];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );

ES6 : ARROW FUNCTIONS

Until arrow functions, every new function defined its own this value

@boyney123

ES6 : ARROW FUNCTIONS - CODE EXAMPLES

@boyney123

ES6 : LET

PROMISES

@boyney123

The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future.

ES6 : PROMISES

Promise has three states:

pending: initial state, not fulfilled or rejected.

fulfilled: meaning that the operation completed successfully.

rejected: meaning that the operation failed.

@boyney123

ES6 : PROMISE LIFE CYCLE

@boyney123

ES6 : PROMISES - CODE EXAMPLES

@boyney123

ES6 : LET

TEMPLATE STRINGS

@boyney123

Template strings are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

`Hello World!`

`Hello brown bag! I cant wait for a few drinks and dance on thursday!`

let person = ‘David’;

`${person} is drunk. Send him home!`

ES6 : TEMPLATE STRINGS

var person = ‘David’;

person + ‘ is drunk. Send him home!’ ES5 example

ES6 example

EVEN MORE ES6…

@boyney123

@boyney123

ES6 : LET

ASYNC

@boyney123

async keyword ensures that the function will return a Promise object.

Within an async function any time you return a value it will actually return a promise that is resolved. If you want to reject you need to throw an error

async function foo() { if( Math.round(Math.random()) ) return 'Success!'; else throw 'Failure!';}

ES7 : ASYNC

ES7 example

function foo() { if( Math.round(Math.random()) ) return Promise.resolve('Success!'); else return Promise.reject('Failure!');}

ES6 example

@boyney123

ES6 : LET

AWAIT

@boyney123

await will stop the function call until the async has resolved or rejected.

async function loadStory() {

try {

let story = await getJSON(‘story.json');

return story;

} catch (err) {

throw ‘Failure!';

}}

ES7 : AWAIT

@boyney123

let db = new PouchDB(‘mydb');

try {

//nice that we don't have to wrap in promise let result = await db.post({});

//This reads pretty nice? let doc = await db.get(result.id);

console.log(doc);

} catch (err) {

console.log(err);

}

ES7 : ASYNC & AWAIT EXAMPLE 2

@boyney123

FURTHER READING

@boyney123

FURTHER READING

https://github.com/lukehoban/es6features

http://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/

https://github.com/nzakas/understandinges6/tree/master/manuscript

https://github.com/bevacqua/es6

@boyney123

THANKS