1CONFIDENTIAL

ECMA SCRIPT 6

FRONTDAYS · SAMARA · 2016 IVAN FEDIAEV, SARATOV, RUSSIA

2CONFIDENTIAL

ПОДДЕРЖКА

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

3CONFIDENTIAL

1. npm install gulp && npm install gulp –g

2. npm install babel-core babel-preset-es2015 --save-dev

3. npm install gulp-babel –save-dev

4. create .babelrc: { “presets”: [“es2015”] }

5. rename “gulpfile.js” to “gulpfile.babel.js”

КАК НАЧАТЬ ПИСАТЬ НА ES6?

4CONFIDENTIAL

'use strict';

import gulp from 'gulp';

const dirs = {

src: 'src',

dest: 'build'

};

gulp.task('default', () => {

return gulp.src(`${dirs.src}/app.js`)

//some actions

.pipe(gulp.dest(`${dirs.dest}`));

});

GULPFILE.BABEL.JS

5CONFIDENTIAL

CONSTANTS

Ecmascript6Ecmascript5

Object.defineProperty(

typeof global === 'object‘ ? global : window,

‘PI’,{

value: 3.141593,

enumerable: true,

writable: false,

configurable: false

});

PI > 3.0;

const PI = 3.14159;

PI > 3.0;

6CONFIDENTIAL

SCOPING. BLOCK-SCOPED VARIABLES

Ecmascript6Ecmascript5

let callbacks = [];

for(let i = 0; i <= 2; i++){

callbacks[i] = function(){

return i * 2;

}

}

var i, callbacks = [];

for(i = 0; i <= 2; i++){

callbacks[i] = function(){

return i * 2;

};

}

var i, callbacks = [];

for(i = 0; i <= 2; i++){

(function(i){

callbacks[i] = function(){

return i * 2;

};

})(i);

}callbacks[0]() === 0; //true

callbacks[1]() === 2; //true

callbacks[2]() === 4; //true

7CONFIDENTIAL

ARROW FUNCTION. EXPRESSION BODIES

Ecmascript6Ecmascript5

odds = evens.map(v => v + 1);

pairs = evens.map(v => ({even: v, odd: v + 1 }));

nums = evens.map((v, i) => v + i);

odds = evens.map(function(v){

return v + 1;

});

pairs = evens.map(function(v){

return { even: v, odd: v + 1 };

});

nums = evens.map(function(v, i){

return v + i;

});

8CONFIDENTIAL

ARROW FUNCTION. STATEMENT BODIES

Ecmascript6Ecmascript5

nums.forEach(function(v) {

if(v % 5 === 0)

fives.push(v);

});

nums.forEach(v => {

if(v % 5 === 0)

fives.push(v);

});

9CONFIDENTIAL

ARROW FUNCTION. LEXICAL THIS

Ecmascript5 Ecmascript6

var self = this;

this.nums.forEach(function(v){

if(v % 5 === 0)

self.fives.push(v);

});

this.nums.forEach(v => {

if(v % 5 === 0)

this.fives.push(v);

});

10CONFIDENTIAL

EXTENDED PARAMETER HANDLING. DEFAULT PARAMETER

VALUES

Ecmascript5 Ecmascript6

function f(x, y, z){

if (y === undefined)

y = 7;

if (z === undefined)

z = 42;

return x + y + z;

};

f(1) === 50;//true

function f(x, y = 7, z = 42){

return x + y + z;

};

f(1) === 50;//true

11CONFIDENTIAL

EXTENDED PARAMETER HANDLING. REST PARAMETER

Ecmascript6

function f(x, y){

var a = Array.prototype.slice.call(arguments, 2);

return (x + y) * a.length;

};

f(1, 2, 'hello', true, 7) === 9;//true

function f(x, y, ...a){

return (x + y) * a.length;

};

f(1, 2, 'hello', true, 7) === 9;//true

Ecmascript5

12CONFIDENTIAL

EXTENDED PARAMETER HANDLING. SPREAD OPERATOR

Ecmascript6

var params = ['hello', true, 7];

var other = [1, 2].concat(params);

f.apply(undefined, [1, 2].concat(params)) === 9;//true

var str = 'foo';

var chars = str.split(''); //['f','o','o']var params = ['hello', true, 7];

var other = [1, 2, ...params]; //[1, 2, 'hello', true,

7]

f(1,2, ...params) === 9;

var str = 'foo';

var charts = [ ...str]; //['f','o','o']

Ecmascript5

13CONFIDENTIAL

TEMPLATE LITERALS. STRING INTERPOLATION

Ecmascript6

message = 'Hello ' + customer.name + '.\n' +

'want to by ' + card.amout + ' ' + card.product + ' for.\n' +

'a total of ' + (card.amount + card.unitprice) + ' bucks?';

message = `Hello ${customer.name}. want to buy

${card.amount} $(card.product} for a total of

${(card.amount * card.unitprice)} bucks?`;

Ecmascript5

var customer = { name: 'Foo'};

var card = { amount: 7, product: 'Bar', unitprice: 42};

14CONFIDENTIAL

EXTENDED LITERALS. BINARY & OCTAL LITERAL

Ecmascript6

parseInt('111110111', 2) === 503;//true

parseInt('767', 8) === 503; //true

0b111110111 === 503;//true

0o767 === 503;//true

Ecmascript5

15CONFIDENTIAL

ENHANCED OBJECT PROPERTIES. PROPERTY SHORTHAND

COMPUTED PROPERTY NAMES

Ecmascript6

var obj = { x: x, y: y };

var obj = {

foo: "bar”

};

obj["baz" + quux()] = 42;

let obj = { x, y };

let obj = {

foo: "bar",

[ "baz" + quux() ]: 42

};

Ecmascript5

16CONFIDENTIAL

ENHANCED OBJECT PROPERTIES. METHOD PROPERTIES

Ecmascript6

var obj = {

foo: function(a, b){

//...

},

boo: function(a, b){

//...

}

};

var obj = {

foo(a, b){

//...

},

boo(a, b){

//...

},

};

Ecmascript5

17CONFIDENTIAL

DESTRUCTURING ASSIGNMENT. ARRAY MATCHING

Ecmascript6

var list = [1, 2, 3];

var a = list[0], b = list[2];

var tmp = a; a = b; b = tmp;

var list = [1, 2, 3];

var [ a, , b ] = list;

[ b, a ] = [ a, b ];

Ecmascript5

18CONFIDENTIAL

DESTRUCTURING ASSIGNMENT. OBJECT MATCHING, DEEP

MATCHING

Ecmascript6

var tmp = getASTNode();

var a = tmp.op;

var b = tmp.lhs.op;

var c = tmp.rhs;

let { op: a, lhs: { op: b }, rhs: c } = getASTNode();

Ecmascript5

19CONFIDENTIAL

DESTRUCTURING ASSIGNMENT. FAIL-SOFT DESTRUCTURING

Ecmascript6

var list = [ 7 ];

var a = typeof list[0] !== 'undefined' ? list[0] : 1;

var b = typeof list[1] !== 'undefined' ? list[1] : 2;

var d = typeof list[2] !== 'undefined' ? list[2] :

undefined;

a === 7;//true

b === 42;//true

d === undefined;//true

var list = [ 7 ];

var [ a = 1, b = 42, d ] = list;

a === 7;//true

b === 42;//true

d === undefined;//true

Ecmascript5

20CONFIDENTIAL

MODULES. VALUE EXPORT/IMPORT

Ecmascript6

//math.js

var LibMath = {};

LibMath.sum = function(x, y){

//..

};

LibMath.pi = 3.14159;

//someApp.js

var math = LibMath;

var a = math.sum(math.pi,math.pi);

export * from 'lib/math';

export var e = 2.7182818286;

export default (x) => Math.exp(x);

import exp, {pi, e} from 'lib/mathplusplus';

var a = exp(pi);

Ecmascript5

21CONFIDENTIAL

CLASSES. CLASS DEFINITION

Ecmascript6

var Shape = function(id, x, y){

this.id = id;

this.move(x, y);

};

Shape.prototype.move = function(x,y){

this.x = x;

this.y = y;

};

class Shape{

constructor (id, x, y){

this.id = id;

this.move(x, y)

}

move(x, y){

this.x = x;

this.y = y;

}

};

Ecmascript5

22CONFIDENTIAL

CLASSES. CLASS INHERITANCE

var Shape = function(id, x, y){ //… };

var Rectangle = function(id, x, y, width, height) {

Shape.call(this, id, x, y);

this.width = width;

this.height = height;

};

Rectangle.prototype = Object.create(Shape.prototype);

Rectangle.prototype.constructor = Rectangle;

Ecmascript5

23CONFIDENTIAL

class Shape { //… };

class Rectangle extends Shape {

constructor(id, x, y, width, height){

super(id, x, y);

this.width = width;

this.height = height;

}

};

Ecmascript6

24CONFIDENTIAL

SYMBOL TYPE

Symbol('foo') !== Symbol('foo');//true

const foo = Sybmol(‘foo’);

const boo = Symbol();

typeof foo === 'symbol'; //true

typeof boo === 'symbol'; //true

let obj = {};

obj[foo] = 'foo';

obj[boo] = 'boo';

JSON.stringify(obj); //{}

Object.keys(obj);//[]

Object.getOwnPropertyNames(obj);//[]

Object.getOwnPropertySymbols(obj);//[foo, bar]

25CONFIDENTIAL

ITERATORS

26CONFIDENTIAL

ITERATORS. ITERATOR & FOR-OF OPERATOR

let fibonacci = {

[Symbol.iterator](){

let pre = 0, cur = 1;

return {

next(){

[pre, cur] = [cur, pre + cur];

return { done: false, value: cur };

}

}

}

};

for(let n of fibonacci){

if(n > 1000)

break;

console.log(n);

}

27CONFIDENTIAL

GENERATORS. GENERATOR FUNCTION, ITERATOR PROTOCOL

let fibonacci = {

*[Symbol.iterator](){

let pre = 0, cur = 1;

for( ; ; ) {

[pre, cur] = [cur, pre + cur];

yield cur;

}

}

}

28CONFIDENTIAL

GENERATORS. GENERATOR FUNCTION, DIRECT USE

function* range(start, end, step){

while(start < end){

yield start;

start += step;

}

};

for(let i of range(0,10,2)){

console.log(i);//0,2,4,6,8

}

29CONFIDENTIAL

GENERATORS. SIMPLEST ASYNC

function request(url){

makeAjaxCall(url, function(response){

it.next(response);

});

};

function *main(){

var result1 = yield request('http://some.url.1');

var data = JSON.parse(result1);

var result2 = yield request('http://some.url.2?id=' + data.id);

var data = JSON.parse(result2);

};

var it = main();

it.next();

30CONFIDENTIAL

MAP/SET & WEAKMAP/WEAKSET. MAP DATA-STRUCTURE

Ecmascript6

var m = {};

m['hello'] = 42;

Object.keys(m).length;//1

for(key in m){

if(m.hasOwnProperty(key)){

console.log(key + ' = ' + m[key]);

}

}

//hello = 42

let m = new Map();

m.set('hello', 42);

m.set('s', 34);

m.get('s');//34

for(let [key, val] of m.entities())

console.log(key + ' = ' + val);

//hello = 42

//s = 34

Ecmascript5

31CONFIDENTIAL

MAP/SET & WEAKMAP/WEAKSET. WEAK-LINK DATA-

STRUCTURES

var ws = new WeakSet();

var obj = {};

var foo = {};

ws.add(window);

ws.add(obj);

ws.has(window);//true

ws.has(obj);//true

ws.has(foo);//false

32CONFIDENTIAL

NEW BUILT-IN METHODS. OBJECT PROPERTY ASSIGNMENT

var dst = { quux: 0 };

var src = { foo: 1, bar: 2 };

Object.assign(dst, src);

dst.quux;//0

dst.foo;//3

33CONFIDENTIAL

NEW BUILT-IN METHODS. ARRAY ELEMENT FINDING

Ecmascript6

[1, 2, 4, 3].filter(function(x){

return x > 3;

})[0]; //4

[1, 2, 4, 3].find(x => x > 3);//4

Ecmascript5

34CONFIDENTIAL

NEW BUILT-IN METHODS. STRING REPEATING AND

SEARCHING

Ecmascript6

Array(4 + 1).join(' ');

'hello'.indexOf('ello') === 1;//true;

' '.repeat(4);

'hello'.startWith('ello',1);

'hello'.includes('ell');

'hello'.includes('ell', 1);

Ecmascript5

35CONFIDENTIAL

PROMISES

36CONFIDENTIAL

PROMISES. PROMISE USAGE

function msgAfterTimeout(msg, who, timeout, onDone){

setTimeout(function(){

onDone(msg + 'Hello' + who + '!');

},timeout);

};

msgAfterTimeout(' ', 'Foo',100, function(msg){

msgAfterTimeout(' ', 'Foo', 200, function(msg){

console.log('done after 300ms' + msg);

});

});

Ecmascript5

37CONFIDENTIAL

PROMISES. PROMISE USAGE

Ecmascript6 function msgAfterTimeout(msg,who,timeout){

return new Promise((resolve, reject) => {

setTimeout(() => resolve(`${msg} Hello ${who}`), timeout);

});

};

msgAfterTimeout(’ ’, 'Foo', 100).then((msg) =>

msgAfterTimeout(’ ', 'Foo', 200).then((msg) =>{

console.log('done after 300ms' + msg);

});

38CONFIDENTIAL

META-PROGRAMMING. PROXYING

let target = {

foo: 'Welcome, foo’

};

let proxy = new Proxy(target, {

get(receiver, name){

return name in receiver ? receiver[name] : `Hello, ${name}`;

}

});

proxy.foo; //'Welcome, foo’

proxy.world; // 'Hello, world'

39CONFIDENTIAL

META-PROGRAMMING. REFLECTION

Ecmascript6

var obj = { a: 1 };

Object.defineProperty(obj, 'b', { value: 2 });

Object.getOwnPropertyNames(obj); //['a','b'];

let obj = { a: 1 };

Object.defineProperty(obj, 'b', { value: 2 });

obj[Symbol('c')] = 3;

Reflect.ownKeys(obj); // ['a', 'b', Symbol(c) ];

Ecmascript5

40CONFIDENTIAL

THANKS FOR ATTENTION!IVAN FEDIAEV, SARATOV, RUSSIA