Способы применения JavaScript сильно изменились за последнее время. Но сам язык начал меняться только сейчас. Я расскажу вам, что нового нас ожидает в ECMAScript 6. Вот несколько тезисов: — новые методы базовых объектов, — управление областью видимости, — работа с коллекциями, — мой любимый «…» префикс, — генераторы, — классы. И, конечно, не забуду рассказать, что из этого можно использовать уже сейчас.

1. Будущее JavaScript
Алексей Симоненко
технический директор Serenity
2013

2. Раньше

3. Сейчас

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

5. Новые методы базовых объектов
Object
String
Array
Number
Math

6. Новые методы базовых объектов
String
String.fromCodePoint
String.prototype.contains
String.prototype.startsWith
String.prototype.endsWith
String.prototype.repeat
String.prototype.codePointAt
String.prototype.toArray

7. Новые методы базовых объектов
String
18
'too much'.contains('too');
// true
'too much'.startsWith('t');
// true
es6-shim
ECMAScrip
t-6
'too much'.endsWith('t');
// false

8. Новые методы базовых объектов
Object
Object.is
Object.assign
Object.mixin
Object.getOwnPropertyDescriptors
Object.getPropertyDescriptor
Object.getPropertyNames
Object.setPrototypeOf

9. Новые методы базовых объектов
Object
23
19
Object.is(NaN, NaN);
// true
15
es6-shim
ECMAScrip
t-6

10. Новые методы базовых объектов
Object
23
19
Object.is(NaN, NaN);
// true
15
Object.assign({a: 1, b: 3}, {b: 2, c: 3});
// {a: 1, b: 2, c: 3}
es6-shim
ECMAScrip
t-6

11. Новые методы базовых объектов
Array
Array.from
Array.of
Array.prototype.find
Array.prototype.findIndex
Array.prototype.fill

12. Новые методы базовых объектов
Array
25
30
[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
es6-shim

13. Новые методы базовых объектов
Array
Нет метода
Array.prototype.unique()

14. Новые методы базовых объектов
Number
Number.isNaN
Number.isFinite
Number.isInteger
Number.toInteger
Number.prototype.clz

15. Новые методы базовых объектов
Math
Math.sign
Math.imul
Math.log1p
Math.log2
Math.log10
Math.expm1
Math.fround
Math.hypot
Math.trunc
Math.cosh
Math.sinh
Math.tanh
Math.acosh
Math.asinh
Math.atanh

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

17. Область видимости
11
let
18
24
var tag = '#wstdays';
if (true) {
let tag = '#404fest';
}
google
traceur
es6ify

18. Область видимости
11
let
18
24
var tag = '#wstdays';
if (true) {
let tag = '#404fest';
console.log(tag); // "#404fest"
}
console.log(tag); // "#wstdays"
google
traceur
es6ify

19. Область видимости
11
const
18
24
const a = 10;
12
6
google
traceur

20. Область видимости
11
const
18
24
const a = 10;
a = 15;
12
6
// SyntaxError: Assignment to constant variable.
google
traceur

21. Область видимости
11
const
18
24
const a = 10;
a = 15;
12
6
// SyntaxError: Assignment to constant variable.
var a = 15;
// SyntaxError: Variable 'a' has already been declared
google
traceur

22. Область видимости
11
const
18
24
var a = 15;
if (true) {
const a = 10;
console.log(a); // 10
}
console.log(a); // 15
12
6
google
traceur

23. Коллекции

24. Коллекции
11
Map
18
let data = new Map();
29
data.set('key', 100);
data.set(666, true);
data.set(undefined, 'some text');
es6-shim
ECMAScrip
t-6
harmonycollections

25. Коллекции
11
Map
18
let data = new Map();
29
data.set('key', 100);
data.set(666, true);
data.set(undefined, 'some text');
let fn = function() { console.log('inside?'); }
data.set(fn, 'function key');
es6-shim
ECMAScrip
t-6
harmonycollections

26. Коллекции
11
Map
18
let data = new Map();
29
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'); // false
data.has(undefined); // true
es6-shim
ECMAScrip
t-6
harmonycollections

27. Коллекции
11
Map
18
let data = new Map();
29
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'); // false
data.has(undefined); // true
data.delete(undefined);
data.has(undefined); // false
es6-shim
ECMAScrip
t-6
harmonycollections

28. Коллекции
11
Map
18
let data = new Map();
29
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'); // false
data.has(undefined); // true
data.delete(undefined);
data.has(undefined); // false
data.get(fn); // "function key"
es6-shim
ECMAScrip
t-6
harmonycollections

29. Коллекции
11
Set
24
let data = new Set([1, 3, 5, 3]);
29
es6-shim
ECMAScrip
t-6
harmonycollections

30. Коллекции
11
Set
24
let data = new Set([1, 3, 5, 3]);
29
data.add(3);
data.add(7);
es6-shim
ECMAScrip
t-6
harmonycollections

31. Коллекции
11
Set
24
let data = new Set([1, 3, 5, 3]);
29
data.add(3);
data.add(7);
data.has(3); // true
data.has(9); // false
es6-shim
ECMAScrip
t-6
harmonycollections

32. Коллекции
11
Set
24
let data = new Set([1, 3, 5, 3]);
29
data.add(3);
data.add(7);
data.has(3); // true
data.has(9); // false
data.delete(3);
data.has(3); // false
es6-shim
ECMAScrip
t-6
harmonycollections

33. Коллекции
for-of
13
let tags = ['#404fest', '#wstdays', '#dconf'];
for (let tag in tags) {
console.log(tag);
}
// 0, 1, 2
google
traceur
es6ify

34. Коллекции
for-of
13
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"
google
traceur
es6ify

35. Коллекции
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

36. Коллекции
for-of
18
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);
}
google
traceur
es6ify
// ["404fest", {"involve": true, "speaker": true}]
// ["wstdays", {"involve": false, "speaker": false}]
// ["dconf",
{"involve": true, "speaker": false}]

37. Коллекции
11
WeakMap
23
29
let data = new WeakMap();
let element = document.querySelector('footer');
data.set(element, 'some text');
harmonycollections

38. Коллекции
11
WeakMap
23
29
let data = new WeakMap();
let element = document.querySelector('footer');
data.set(element, 'some text');
data.has(element); // true
data.get(element); // "some text"
harmonycollections

39. Коллекции
11
WeakMap
23
29
let data = new WeakMap();
let element = document.querySelector('footer');
data.set(element, 'some text');
data.has(element); // true
data.get(element); // "some text"
element = null;
data.has(element); // false
harmonycollections

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

41. Странные конструкции
Destructuring assignment
12
let data = [10, 20, 30];
let [a, b, c] = data;
// a = 10, b = 20, c = 30
google
traceur
es6ify

42. Странные конструкции
Destructuring assignment
12
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
google
traceur
es6ify

43. Странные конструкции
Destructuring assignment
12
let [a, [[b], c]] = [10, [[20], 30]];
// a = 10, b = 20, c = 30
google
traceur
es6ify

44. Странные конструкции
Destructuring assignment
12
let [a, [[b], c]] = [10, [[20], 30]];
// a = 10, b = 20, c = 30
[, month, day, year] = Date().split(' ');
// month = "Oct", day = "13", year = "2013"
google
traceur
es6ify

45. Странные конструкции
Destructuring assignment
12
let data = {a: 10, b: 20, c: 30};
let {a, b, c} = data;
// a = 10, b = 20, c = 30
google
traceur
es6ify

46. Странные конструкции
Destructuring assignment
12
let data = {a: 10, b: 20, c: 30};
let {a, b, c} = data;
// a = 10, b = 20, c = 30
let {parse, stringify} = JSON;
google
traceur
es6ify

47. Странные конструкции
Destructuring assignment
function today() {
return {
d: 13,
m: 9,
y: 2013
};
}
let {m: month, y: year} = today();
// month = 9, year = 2013
12
google
traceur
es6ify

48. Странные конструкции
Object literal property value shorthand
let name = 'Alena';
let email = 'alena@serenity.su';
let profile = {'name': name, 'email': email};
google
traceur

49. Странные конструкции
Object literal property value shorthand
let name = 'Alena';
let email = 'alena@serenity.su';
let profile = {'name': name, 'email': email};
let profile = {name, email};
// {"name": "Alena", "email": "alena@serenity.su"}
google
traceur

50. Странные конструкции
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

51. Странные конструкции
Spread operator
16
let params = [2013, 9, 13, 15, 30];
let date = new Date(...params);
// Sun Oct 13 2013 15:30:00 GMT+0400 (MSK)
google
traceur
es6ify

52. Странные конструкции
Spread operator
16
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"]
google
traceur
es6ify

53. Странные конструкции
Rest parameter
16
function elastic(key, ...items) {
console.log(items);
}
elastic('tags', '#404fest', '#dconf', '#wstdays');
// ["#404fest", "#dconf", "#wstdays"]
google
traceur
es6ify

54. Странные конструкции
Нет метода
Array.prototype.unique()?
Сделаем его сами

55. Странные конструкции
let data = [
10, 20, 10, 35, 'S',
'Y', 'S', 35, 10, 'S'
];
let unique = [...new Set(data)];
// [10, 20, 35, "S", "Y"]

56. Функции
6 000 000 °

57. Функции
Default argument
16
function fn(a, b = false, c = 'world') {
console.log(a, b, c);
}
fn(10);
// a = 10, b = false, c = "world"
google
traceur
es6ify

58. Функции
Default argument
16
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
google
traceur
es6ify

59. Функции
Default argument
16
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
fn(10, 'world', undefined);
// a = 10, b = "world", c = "world"
google
traceur
es6ify

60. Функции
Default argument
function fn(that = this) {
setTimeout(function() {
console.log(that);
}, 100);
}
16
google
traceur
es6ify

61. Функции
Arrow function
23
[1, 3, 15, 7, 15, 23].find(function(item) {
return item / 3 === 5;
});
es6ify
harmonizr

62. Функции
Arrow function
23
[1, 3, 15, 7, 15, 23].find(function(item) {
return item / 3 === 5;
});
[1, 3, 15, 7, 15, 23].find(item => item / 3 === 5);
es6ify
harmonizr

63. Функции
Arrow function
23
[1, 3, 15, 7, 15, 23].find(function(item) {
return item / 3 === 5;
});
[1, 3, 15, 7, 15, 23].find(item => item / 3 === 5);
[1, 3, 15, 7, 15, 23].find(item => {
let test = item / 3;
return test === 5;
});
es6ify
harmonizr

64. Генераторы

65. Генераторы
26
function* compute(degree, max) {
var a = 1;
29
for (let i = 0; i < max; i++) {
yield a;
a = a * degree;
}
}
let gen = compute(2, 3);
google
traceur
es6ify

66. Генераторы
26
function* compute(degree, max) {
var a = 1;
29
for (let i = 0; i < max; i++) {
yield a;
a = a * degree;
}
}
let gen = compute(2, 3);
google
traceur
es6ify
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 4, done: false }

67. Генераторы
26
function* compute(degree, max) {
var a = 1;
29
for (let i = 0; i < max; i++) {
yield a;
a = a * degree;
}
}
let gen = compute(2, 3);
google
traceur
es6ify
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 4, done: false }
gen.next(); // { value: undefined, done: true }

68. Генераторы
26
function* compute(degree, max) {
var a = 1;
29
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
google
traceur
es6ify

69. Генераторы
26
function* seq(a) {
yield a + 5;
29
let b = yield null;
return a + b;
}
let gen = seq(5);
google
traceur
es6ify

70. Генераторы
26
function* seq(a) {
yield a + 5;
29
let b = yield null;
return a + b;
}
let gen = seq(5);
google
traceur
gen.next().value; // 10
es6ify

71. Генераторы
26
function* seq(a) {
yield a + 5;
29
let b = yield null;
return a + b;
}
let gen = seq(5);
google
traceur
gen.next().value; // 10
es6ify
gen.next().value; // null

72. Генераторы
26
function* seq(a) {
yield a + 5;
29
let b = yield null;
return a + b;
}
let gen = seq(5);
google
traceur
gen.next().value; // 10
es6ify
gen.next().value; // null
gen.next(8).value; // 13

73. Классы

74. Классы
class Employee {
constructor(title) {
this.title = title;
}
who() {
console.log(this.title);
}
}
google
traceur
es6ify
harmonizr

75. Классы
class Employee {
constructor(title) {
this.title = title;
}
who() {
console.log(this.title);
}
}
google
traceur
es6ify
let ryan = new Employee('Райан Стоун');
ryan.who();
// Райан Стоун
harmonizr

76. Классы
class Chief extends Employee {
constructor(firstname, surname, role) {
super(firstname + ' ' + surname);
this.role = role;
}
fire(person) {
person.dismiss();
}
}
google
traceur
es6ify
harmonizr

77. Классы
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

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

79. let
const
Map
Set
WeakMap

80. Спасибо.
simonenko
simonenko
simonenko.su