Introduction into ES6 JavaScript.

AGENDA
@boyney123
Promises
Arrow functions
Consts
Let
Modules
StringTemplates
Destructuring
Parameters
Classes
Transpilation
Enhanced Object Literals

HOW CAN I USE ES6
@boyney123
https://kangax.github.io/compat-table/es6/
HOW CAN WE USE ES6 TODAY?

@boyney123
ES6 : TRANSPILATION
Traceur
TypeScript

@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 deﬁnes a variable globally, or locally to an entire function regardless of
block scope.
ES6 : LET

@boyney123
ES6 : LET - CODE EXAMPLES

@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 identiﬁer cannot be reassigned.
const API_URL = “http://www.some-api-url.co.uk”;
ES6 : CONST

@boyney123
ES6 : CONST - CODE EXAMPLES

@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
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
var obj = {
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
//get property
get property() {},
//set property
set property(value) {},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};
ES6 : OBJECT

@boyney123
In JavaScript, parameters of functions default to undeﬁned. 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 deﬁned its own this value

@boyney123
ES6 : ARROW FUNCTIONS - CODE EXAMPLES

@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 fulﬁlled or rejected.
fulﬁlled: 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

@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
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
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

Introduction into ES6 JavaScript.

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (15)

Similaire à Introduction into ES6 JavaScript.

Similaire à Introduction into ES6 JavaScript. (20)

Dernier

Dernier (20)

Introduction into ES6 JavaScript.