Алексей Симоненкотехнический директор Serenity

Будущее JavaScript

2013

Раньше

Сейчас

12 лет между последними большими изменениями спецификации JavaScript

12 лет между последними большими изменениями спецификации JavaScript

Новые методы базовых объектов

ObjectStringArrayNumberMath

Новые методы базовых объектовString

String.fromCodePoint

String.prototype.containsString.prototype.startsWithString.prototype.endsWithString.prototype.repeatString.prototype.codePointAtString.prototype.toArray

Новые методы базовых объектовString

'too much'.contains('too');// true

'too much'.startsWith('t');// true

'too much'.endsWith('t');// false

18

es6-shim

ECMAScript-6

Новые методы базовых объектовObject

Object.isObject.assignObject.mixinObject.getOwnPropertyDescriptorsObject.getPropertyDescriptorObject.getPropertyNamesObject.setPrototypeOf

Новые методы базовых объектовObject

Object.is(NaN, NaN);// true

23

19

15

es6-shim

ECMAScript-6

Новые методы базовых объектовObject

Object.assign({a: 1, b: 3}, {b: 2, c: 3});// {a: 1, b: 2, c: 3}

Object.is(NaN, NaN);// true

23

19

15

es6-shim

ECMAScript-6

Новые методы базовых объектовArray

Array.fromArray.of

Array.prototype.findArray.prototype.findIndexArray.prototype.fill

Новые методы базовых объектовArray

[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});

// 15

[1, 3, 15, 7, 15, 23].findIndex(function(item) { return item / 3 === 5;});

// 2

25

30

es6-shim

Новые методы базовых объектовArray

Нет метода Array.prototype.unique()

Новые методы базовых объектовNumber

Number.isNaNNumber.isFiniteNumber.isIntegerNumber.toInteger

Number.prototype.clz

Новые методы базовых объектовMath

Math.signMath.imulMath.log1pMath.log2Math.log10Math.expm1Math.froundMath.hypot

Math.truncMath.coshMath.sinhMath.tanhMath.acoshMath.asinhMath.atanh

Область видимости

Область видимостиlet

var tag = '#wstdays';

if (true) { let tag = '#404fest';}

11

18

24

google traceur

es6ify

Область видимостиlet

var tag = '#wstdays';

if (true) { let tag = '#404fest'; console.log(tag); // "#404fest"}

console.log(tag); // "#wstdays"

11

18

24

google traceur

es6ify

Область видимостиconst

const a = 10;

11

18

24

12

6

google traceur

Область видимостиconst

const a = 10;

a = 15;// SyntaxError: Assignment to constant variable.

11

18

24

12

6

google traceur

Область видимостиconst

const a = 10;

a = 15;// SyntaxError: Assignment to constant variable.

var a = 15;// SyntaxError: Variable 'a' has already been declared

11

18

24

12

6

google traceur

Область видимостиconst

var a = 15;

if (true) { const a = 10; console.log(a); // 10}

console.log(a); // 15

18

11

24

12

6

google traceur

Коллекции

КоллекцииMap

let data = new Map();

data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');

11

18

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииMap

let data = new Map();

data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');

let fn = function() { console.log('inside?'); }data.set(fn, 'function key');

11

18

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииMap

let data = new Map();

data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');

let fn = function() { console.log('inside?'); }data.set(fn, 'function key');

data.has('keys'); // falsedata.has(undefined); // true

11

18

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииMap

let data = new Map();

data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');

let fn = function() { console.log('inside?'); }data.set(fn, 'function key');

data.has('keys'); // falsedata.has(undefined); // true

data.delete(undefined);data.has(undefined); // false

11

18

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииMap

let data = new Map();

data.set('key', 100);data.set(666, true);data.set(undefined, 'some text');

let fn = function() { console.log('inside?'); }data.set(fn, 'function key');

data.has('keys'); // falsedata.has(undefined); // true

data.delete(undefined);data.has(undefined); // false

data.get(fn); // "function key"

11

18

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииSet

let data = new Set([1, 3, 5, 3]);

11

24

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииSet

let data = new Set([1, 3, 5, 3]);

data.add(3);data.add(7);

11

24

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииSet

let data = new Set([1, 3, 5, 3]);

data.add(3);data.add(7);

data.has(3); // truedata.has(9); // false

11

24

29

es6-shim

ECMAScript-6

harmony-collections

КоллекцииSet

let data = new Set([1, 3, 5, 3]);

data.add(3);data.add(7);

data.has(3); // truedata.has(9); // false

data.delete(3);data.has(3); // false

11

24

29

es6-shim

ECMAScript-6

harmony-collections

Коллекцииfor-of

let tags = ['#404fest', '#wstdays', '#dconf'];

for (let tag in tags) { console.log(tag);}

// 0, 1, 2

13

google traceur

es6ify

Коллекцииfor-of

let tags = ['#404fest', '#wstdays', '#dconf'];

for (let tag in tags) { console.log(tag);}

// 0, 1, 2

for (let tag of tags) { console.log(tag);}

// "#404fest", "#wstdays", "#dconf"

13

google traceur

es6ify

Коллекцииfor-of

let tags = new Set([ '#404fest', '#wstdays', '#404fest', '#dconf']);

for (let tag of tags) { console.log(tag);}

// "#404fest", "#wstdays", "#dconf"

24

google traceur

es6ify

Коллекцииfor-of

let data = new Map();

data.set('404fest', {'involve': true, 'speaker': true});data.set('wstdays', {'involve': false, 'speaker': false});data.set('dconf', {'involve': true, 'speaker': false});

for (let conf of data) { console.log(conf);}

// ["404fest", {"involve": true, "speaker": true}]// ["wstdays", {"involve": false, "speaker": false}]// ["dconf", {"involve": true, "speaker": false}]

18

google traceur

es6ify

КоллекцииWeakMap

let data = new WeakMap();let element = document.querySelector('footer');

data.set(element, 'some text');

11

23

29

harmony-collections

КоллекцииWeakMap

let data = new WeakMap();let element = document.querySelector('footer');

data.set(element, 'some text');

data.has(element); // truedata.get(element); // "some text"

11

23

29

harmony-collections

КоллекцииWeakMap

let data = new WeakMap();let element = document.querySelector('footer');

data.set(element, 'some text');

data.has(element); // truedata.get(element); // "some text"

element = null;data.has(element); // false

11

23

29

harmony-collections

Странные конструкции

let data = [10, 20, 30];let [a, b, c] = data;

// a = 10, b = 20, c = 30

Странные конструкцииDestructuring assignment 12

google traceur

es6ify

let data = [10, 20, 30];let [a, b, c] = data;

// a = 10, b = 20, c = 30

let a = 10;let b = 20;

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

// a = 20, b = 10

Странные конструкцииDestructuring assignment 12

google traceur

es6ify

let [a, [[b], c]] = [10, [[20], 30]];

// a = 10, b = 20, c = 30

Странные конструкцииDestructuring assignment 12

google traceur

es6ify

let [a, [[b], c]] = [10, [[20], 30]];

// a = 10, b = 20, c = 30

[, month, day, year] = Date().split(' ');

// month = "Oct", day = "13", year = "2013"

Странные конструкцииDestructuring assignment 12

google traceur

es6ify

let data = {a: 10, b: 20, c: 30};let {a, b, c} = data;

// a = 10, b = 20, c = 30

Странные конструкцииDestructuring assignment 12

google traceur

es6ify

let data = {a: 10, b: 20, c: 30};let {a, b, c} = data;

// a = 10, b = 20, c = 30

let {parse, stringify} = JSON;

Странные конструкцииDestructuring assignment 12

google traceur

es6ify

function today() { return { d: 13, m: 9, y: 2013 };}

let {m: month, y: year} = today();

// month = 9, year = 2013

Странные конструкцииDestructuring assignment 12

google traceur

es6ify

let name = 'Alena';let email = 'alena@serenity.su';

let profile = {'name': name, 'email': email};

Странные конструкцииObject literal property value shorthand

google traceur

let name = 'Alena';let email = 'alena@serenity.su';

let profile = {'name': name, 'email': email};

let profile = {name, email};

// {"name": "Alena", "email": "alena@serenity.su"}

Странные конструкцииObject literal property value shorthand

google traceur

let data = new Map();

data.set('404fest', {'involve': true, 'speaker': true});data.set('wstdays', {'involve': false, 'speaker': false});data.set('dconf', {'involve': true, 'speaker': false});

for (let [name, {involve}] of data) { console.log(name, involve);}

// "404fest", true// "wstdays", false// "dconf", true

Странные конструкции

let params = [2013, 9, 13, 15, 30];let date = new Date(...params);

// Sun Oct 13 2013 15:30:00 GMT+0400 (MSK)

Странные конструкцииSpread operator 16

google traceur

es6ify

let params = [2013, 9, 13, 15, 30];let date = new Date(...params);

// Sun Oct 13 2013 15:30:00 GMT+0400 (MSK)

let speak = ['#404fest', '#dconf'];let tags = ['#fronteers13', ...speak, '#wstdays'];

// ["#fronteers13", "#404fest", "#dconf", "#wstdays"]

Странные конструкцииSpread operator 16

google traceur

es6ify

function elastic(key, ...items) { console.log(items);}

elastic('tags', '#404fest', '#dconf', '#wstdays');

// ["#404fest", "#dconf", "#wstdays"]

Странные конструкцииRest parameter 16

google traceur

es6ify

Странные конструкции

Нет метода Array.prototype.unique()?

Сделаем его сами

let data = [ 10, 20, 10, 35, 'S', 'Y', 'S', 35, 10, 'S'];

let unique = [...new Set(data)];

// [10, 20, 35, "S", "Y"]

Странные конструкции

Функции

6 000 000 °

ФункцииDefault argument

function fn(a, b = false, c = 'world') { console.log(a, b, c);}

fn(10);// a = 10, b = false, c = "world"

16

google traceur

es6ify

ФункцииDefault argument

function fn(a, b = false, c = 'world') { console.log(a, b, c);}

fn(10);// a = 10, b = false, c = "world"

fn(10, 'world', null);// a = 10, b = "world", c = null

16

google traceur

es6ify

ФункцииDefault argument

function fn(a, b = false, c = 'world') { console.log(a, b, c);}

fn(10);// a = 10, b = false, c = "world"

fn(10, 'world', undefined);// a = 10, b = "world", c = "world"

fn(10, 'world', null);// a = 10, b = "world", c = null

16

google traceur

es6ify

ФункцииDefault argument

function fn(that = this) { setTimeout(function() { console.log(that); }, 100);}

16

google traceur

es6ify

ФункцииArrow function

[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});

23

es6ify

harmonizr

ФункцииArrow function

[1, 3, 15, 7, 15, 23].find(item => item / 3 === 5);

[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});

23

es6ify

harmonizr

ФункцииArrow function

[1, 3, 15, 7, 15, 23].find(item => { let test = item / 3; return test === 5;});

[1, 3, 15, 7, 15, 23].find(item => item / 3 === 5);

[1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5;});

23

es6ify

harmonizr

Генераторы

Генераторы

function* compute(degree, max) { var a = 1;

for (let i = 0; i < max; i++) { yield a; a = a * degree; }}

let gen = compute(2, 3);

26

29

google traceur

es6ify

Генераторы

function* compute(degree, max) { var a = 1;

for (let i = 0; i < max; i++) { yield a; a = a * degree; }}

let gen = compute(2, 3);

gen.next(); // { value: 1, done: false }gen.next(); // { value: 2, done: false }gen.next(); // { value: 4, done: false }

26

29

google traceur

es6ify

Генераторы

function* compute(degree, max) { var a = 1;

for (let i = 0; i < max; i++) { yield a; a = a * degree; }}

let gen = compute(2, 3);

gen.next(); // { value: 1, done: false }gen.next(); // { value: 2, done: false }gen.next(); // { value: 4, done: false }

gen.next(); // { value: undefined, done: true }

26

29

google traceur

es6ify

Генераторы

function* compute(degree, max) { var a = 1;

for (let i = 0; i < max; i++) { yield a; a = a * degree; }}

for (let degree of compute(2, 5)) { console.log(degree);}

26

29

google traceur

es6ify

Генераторы

function* compute(degree, max) { var a = 1;

for (let i = 0; i < max; i++) { yield a; a = a * degree; }}

for (let degree of compute(2, 5)) { console.log(degree);}

// 1, 2, 4, 8, 16

26

29

google traceur

es6ify

Генераторы

function* seq(a) { yield a + 5;

let b = yield null; return a + b;}

let gen = seq(5);

26

29

google traceur

es6ify

Генераторы

function* seq(a) { yield a + 5;

let b = yield null; return a + b;}

let gen = seq(5);

gen.next().value; // 10

26

29

google traceur

es6ify

Генераторы

function* seq(a) { yield a + 5;

let b = yield null; return a + b;}

let gen = seq(5);

gen.next().value; // 10

gen.next().value; // null

26

29

google traceur

es6ify

Генераторы

function* seq(a) { yield a + 5;

let b = yield null; return a + b;}

let gen = seq(5);

gen.next().value; // 10

gen.next().value; // null

gen.next(8).value; // 13

26

29

google traceur

es6ify

Классы

Классы

class Employee { constructor(title) { this.title = title; }

who() { console.log(this.title); }}

google traceur

es6ify

harmonizr

Классы

class Employee { constructor(title) { this.title = title; }

who() { console.log(this.title); }}

let ryan = new Employee('Райан Стоун');ryan.who();

// Райан Стоун

google traceur

es6ify

harmonizr

Классы

class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; }

fire(person) { person.dismiss(); }}

google traceur

es6ify

harmonizr

Классы

class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; }

fire(person) { person.dismiss(); }}

let mat = new Chief('Мэтт', 'Ковальски', 'owner');mat.who();

// Мэтт Ковальски

google traceur

es6ify

harmonizr

Ответственный за поддержку стандартов

Ответственный за поддержку стандартов

letconstMapSet

WeakMap

simonenko simonenko simonenko.su

Спасибо.