Пробуем ES2015/ES6 в действии

Буквально на днях (17 июня) свершилось то, чего ждали почти 6 лет в мире Javascript. Генеральное собрание Ecma International официально одобрило стандарт ECMA-262 6 версии, который является спецификацией языка ECMAScript 6 (ES6), который так же называют ECMAScript 2015. Предыдущий стандарт языка Javascript был одобрен в 2009 году (ES5).

Теперь дело за браузерами, которые начнут усиленно внедрять спецификацию языка в свои движки. Следить за поддержкой ES2015 удобно на сайте kangax.github.io/compat-table/es6.

Некоторые термины:

• ECMAScript — это официальный стандарт языка JavaScript.
• TC39 — комитет, развивающий стандарт ECMAScript и принимающий решения по внедрению нового функционала.
• Внутри самого ECMAScript много стандартов. Самый популярный из них — ECMA-262.

Немного истории

Архив стандарта ECMA-262 можно посмотреть на официальном сайте.

Обзор нововведений в ECMAScript 6:

• Поддержка классов 14.5.
• Шаблоны строк 12.2.9, 12.3.7, предоставляющие удобные средства для форматирования строк.
• Поддержка лексических объявлений переменных 13.2.1 (Lexical Declarations), позволяющих ограничить текущим блоком область видимости ключевых слов, через их повторное определение при помощи оператора let вместо var
• Оператор const 13.2.1 для определения переменных, доступных только для чтения
• Сокращённый формат задания объектов 13.2.1 (запись var a = {'obj1': obj1, 'obj2': obj2} теперь можно сократить до var a = {obj1, obj2} )
• Модули 15.2. Для экспорта и импорта модулей введены операторы export и import, например, import * as mymodule from "lib/mymodule. Предоставляются средства динамической загрузки модулей, пространства имён и изоляция состояния
• Arrow-функции 14.2 (синтаксис =>) для быстрого определения анонимных функций (например, x.map(x => console.log(x * x));)
• Добавлен новый тип Symbol 19.4, применимый для идентификаторов свойств объектов
• Генераторы 25.2, позволяющие организовать эффективное выполнение функций в асинхронном режиме. Генераторы представляют собой специальные функции, генерирующие итераторы. Использование выражения yield для генератора, позволяет приостановить его выполнение и вернуть управление вызвавшей генератор функции. Особенность генератора состоит в том, что последующие вызовы будут использовать предыдущее состояние и продолжат выполнение кода генератора с того места, где он был приостановлен
• Объект WeakSet 23.4, позволяющий определить множество из объектов, и объект WeakMap 23.3, определяет коллекцию пар ключ/значение в которых ключ является объектом, к которому может быть прикреплено произвольное значение. WeakSet и WeakMap отличаются использованием эффективных с точки зрения потребления памяти структур, использующих сборщик мусора для удаления неиспользуемых объектов (объект удаляется, если на него больше не осталось ссылок, кроме ссылки из текущей коллекции) и предотвращающих возникновение утечек памяти;
• Механизм Promise 25.4, предназначенный для получения значений в асинхронном режиме. Позволяет определить значение, которое пока неизвестно, но будут определено через какое-то время
• Значения по умолчанию для аргументов функций 19.2 (например, function myfunc(a='test', b=1))
• Передача в функцию произвольной группы параметров в форме массива 19.2 (например, function myfunc(a, b, ...c))
• Cтруктуры данных Map и Set 23.1, 23.2, упрощающих работу со специфичными типами коллекций. Map позволяет определять коллекции наборов в формате ключ/значение, при том, что в качестве ключа и значения могут выступать любые выражения JavaScript. По аналогии Set позволяет задать множество любых выражений JavaScript;
• Поддержка абстракции массивов (Array comprehensions), дающих возможность создания нового массива на основе другого массива;

• Добавлено множество методов для строк, массивов и математических операций, в том числе:

  • Array.from() 22.1.2.1
  • Array.prototype.keys 22.1.3.13
  • Array.prototype.entries 22.1.3.4
  • Array.prototype.copyWithin() 22.1.3.3
  • Number.isSafeInteger() 20.1.2.5
  • Math.fround() 20.2.2.17
  • String.prototype.startsWith() 21.1.3.18
  • String.prototype.endsWith() 21.1.3.6
  • Math.imul 20.2.2.19

В дополненение к списку хочу упомянуть хороший сайт es6-features.org, поддерживаемый @engelschall, на котором приводятся обзор и сравнение новых фич из ES6 c ES5.

А пока разработчики браузеров пишут свои движки с поддержкой ES2015, мы можем попробовать новый стандарт в действии уже сейчас. Например, сейчас большинство возможностей ES2015 в Chrome скрыто под флагом chrome://flags/#enable-javascript-harmony. Включив это свойство и перезапустив браузер, можно уже сейчас использовать следующие функции ES2015.

У @addyosmani есть замечательный репозиторий, где он собрал коллекцию es6-tools. Первым в списке стоит Babel. Давайте разберем его подробнее и узнаем, как с помощью него можно уже сейчас писать код на ES6.

Babel

Babel - это JavaScript транскомпилятор. Если кратко, то транскомпилятор отличается от компилятора тем, что он переводит код из новой версии в более старый - стабильный. Подробнее про транскомпиляторы можно почитать тут. Как написано на их сайте:

By default, Babel ships with a set of ES2015 syntax transformers. These allow you to use new syntax, right now without waiting for browser support.

и это то, что нам нужно! Поиграться с этим транскомпилятором, не устанавливая его, можно прямо на сайте babeljs.io/repl/. Если мы хотим написать что-то серьезное, то нам нужно установить и начать использовать этот транскомпилятор.

Пишем свой первый класс на ES2015

Используем сервис codepen.io и включим в настройках поддержку Babel. В своем примере я продемонстрировал новые возможности ES2015: классы, их наследование и шаблоны строк.

// Базовый класс Person
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  about() {
     console.log(`${this.name} is ${this.age} years old`);
  }
}
var jack = new Person("Jack", "50");
jack.about();
// Класс Son - наследник
class Son extends Person {
constructor(name, age) {
super(name, age);
this.son = true;
}
}
var john = new Son("John", "25");
john.about();
john.son;

Ссылки