Документ обсуждает новые функции и улучшения, представленные в стандарте ECMAScript 6, который был запланирован на конец 2014 года. Основные темы включают стрелочные функции, деструктуризацию, новые методы работы с массивами и объектами, а также модули и генераторы. В конце документа приведены ссылки на ресурсы для проверки поддержки ECMAScript 6.

1. EcmaScript 6 in action
Что JS новый нам готовит
Юрий Трухин)
cloud computing expert @infoboxcloud
trukhinyuri@infoboxcloud.com
twitter.com/trukhinyuri

2. Обо мне
• В InfoboxCloud с 2013 года
• Отвечаю за счастье гиков в
облаках
• Думаю о будущем и
воплощаю его
• Адвокат пользователей
• Пишу код и рассказываю об
этом

3. Многое в вебе улучшалось в последнее
время…

4. Многое в вебе улучшалось в последнее
время…
но не основа EcmaScript

5. Наступает счастье EcmaScript 6

6. Наступает счастье EcmaScript 6
релиз стандарта запланирован на конец 2014

7. Что такое Harmony?
Набор идей, не вошедших в EcmaScript 5 (3.1)
Цель:
сложные приложения
переход к тестируемой спецификации
адаптация стандартов дефакто где возможно
сохранение версионирования простым
поддержка статической типизации где необходимо
библиотеки
кодогенераторы

8. Предложения
улучшения функций
генераторы и итераторы
модульность
улучшения api
полная поддержка UTF-16
scoping binding, callingколлекции

9. arrow functions =>
Стрелочные функции обеспечивают лексическое
связывание. this, super и arguments определяются не тем,
как функции были вызваны, а тем - как были созданы.
!
this, super и arguments не изменяются на протяжении
всего цикла жизни функции.
!
Стрелочные функции не могут быть использованы как
конструктор - при использовании new будет ошибка.
!
Собственное значение arguments недоступно.

10. arrow functions =>
var fun = (x) => x;
Синтаксис
Объявление всегда начинается со списка аргументов, далее
стрелка и тело функции.
1 параметр
var result = value => value;
var result = function (value) { return value; };
Скобки не обязательны.
В теле функции фигурные скобки и return не обязательны.
несколько параметров
var sum = (arg1, arg2) => arg1 + arg2;
var sum = function (arg1, arg2) { return arg1 + arg2; };

11. arrow functions =>
Синтаксис
без парамеров
var sum = () => 1 + 2;
var sum = function () { return 1 + 2; };
Если тело функции содержит более одного выражения -
нужно использовать.
традиционный синтаксис
var sum = (arg1, arg2) => { return arg1 + arg2; };
var sum = function (arg1, arg2) { return 1 + 2; };

12. arrow functions =>
var item = id => ({ id: id, name: “Name”});
var item = function(id) {return {id: id, name: “Name”} };
Если тело функции не содержит фигурных скобок и просто
возвращает литерал объекта - должно быть в круглых
скобках.
переменное число параметров
var item = (…rest) => rest;
var item = function () { return [].slice.apply(arguments) };
литерал объекта
используем rest паттерн из шаблонов деструктуризации
для любых шаблонов деструктуризации как единственного
параметра функции наличие круглых скобок обязательно

13. Function to String
conversion
Если вызван Function.prototype.toString.call(fn), to eval по
результату должен вызвать ту же функцию в том же
лексическом контексте:
!
- должны сработать биндинги к переменным в этом scope
!
- если исполняется внутри use strict; – может быть
нарушена строгость оригинального контекста.

14. Function Name property
У каждой функции есть свойство name типа String.
Автоматически выводит имена для синтезированных
функций (get, set, bind).
Позволяет штатно изменять имя функции.
Свойство name не поменяет Function.prototype.toString();

15. Block scoping bindings
let, const, block functions разрешаются для всей
программы, тела функции или блока. Разница с ES5 Strict
mode – не позволял определение в блоке.
let – новый var, но с block scope
const – неизменяемый let
block functions – функции в let

16. Destructing
Позволяет деструктурировать данные при присваивании.
Перемена мест
[a, b] = [b, a]
function f() { return [1,2]; }
var a,b;
[a, b] = f();
Действует только слева от =.
Возврат нескольких значений из функции
Игнорирование некоторых значений при возврате
function f() { return [1,2,3]; }
var [a, , b] = f();

17. Destructing
Погружение в массив
[a,,[b,,[c]]] = f();
Деструктуризация объекта
var {op: a, lhs: b, rhs: c} = getASTNode();
Погружение в объект
var {op: a, lhs: {op: b}, rhs: c} = getASTNode();
Цикл по объекту
for (let [name, value] in obj)
print (name, value);
Цикл по значениям в объекте
for each ( let { name: n, family: {father: f} } in obj)
print (n, f)

18. Destructing
Погружение в массив
[a,,[b,,[c]]] = f();
Деструктуризация объекта
var {op: a, lhs: b, rhs: c} = getASTNode();
Погружение в объект
var {op: a, lhs: {op: b}, rhs: c} = getASTNode();
Цикл по объекту
for (let [name, value] in obj)
print (name, value);
Цикл по значениям в объекте
for each ( let { name: n, family: {father: f} } in obj)
print (n, f)

19. Destructing refutable
patterns
Несоответствие паттерну вызывает исключение
let ?[x, y, z] = [1, 2] //x =1, y = 2, z = undefined
let {?a: x} = {} // x = undefined
let {a: x} = {} // throw

20. Parameter default values
Возможность использования опциональных параметров без
проверки их задания.
function add (x = 0, y = 0) {
return x + y;
};

21. Rest parameters
Возможность передавать различное количество
параметров, позволяя определять устаревшие и т.д.
function simpleApply (func, …args) {
return func.apply(undefined, args);
};

22. Rest parameters
Возможность передавать различное количество
параметров, позволяя определять устаревшие и т.д.
function simpleApply (func, …args) {
return func.apply(undefined, args);
};

23. Direct Proxies
Конструирование proxy объекта:
var proxy = Proxy(target, handler);
target и handler – Objects.
Объект, для которого разработчик должен определить свое
поведение.
var p = Proxy.create({
get: function (proxy, name) {
return “Hello”, name;
}
});
document.write (p.World);
handler – обработчик мета уровня.
name – прототип прокси-объекта.
Proxy.createFunction (handler,
call, construct);

24. Generators: yield
Вычисляют следующее значение функции только при
обращении к нему.
Бесконечные потоки
function* fibonacci () {
var a = 0, b = 1, c = 0;
while (true) {
yield a;
c = a;
a = b;
b = c + b;
}
}
!
function run() {
var seq = fibonacci();
console.log(seq.next().value); //0
console.log(seq.next().value); //1
}

25. Modules
module A {
export function fa() {…}
export function fb(i) {…}
}
!
A.fa();
import A.*;
fb(5);
!
Возможность разработки изолированных модулей.
Поддерживается загрузка из внешнего пути.
Финальная семантика еще не определена.

26. Это далеко не все, что войдет в EcmaScript 6,
но готовиться нужно уже сейчас!
Вопросы?
Проверить поддержку EcmaScript 6:
http://kangax.github.io/es5-compat-table/es6/
Google Traceur Compiler
https://github.com/google/traceur-compiler
trukhinyuri@infoboxcloud.com
Пишите мне по любым вопросам!