ECMAScript для чайников, или Эволюция развития Javascript

Одной из особенностей JavaScript является активное использование акронимов. Все эти ES6, ES8, ES12, ES2017 могут легко сбить с толку, но сегодня мы попробуем последовательно разобраться, что это такое и зачем существует. Также поговорим о том, чем отличается ECMAScript от JavaScript (а различия там принципиальные), попутно сравним с TypeScript, а также обсудим общую историю развития стандарта, что окончательно объяснит логику развития JavaScript. Погнали!

Содержание:
1. Что такое ECMAScript? Отличия от JavaScript
2. Кратко история версий ES
3. TypeScript и его поддержка ECMAScript
4. Сравнение кода в ECMAScript, TypeScript, JavaScript
Заключение

1. Что такое ECMAScript? Его возможности? Отличия от JavaScript

Для начала погрузимся в историю вопроса. Язык программирования JavaScript изначально создавали как скриптовый язык для Netscape. После релиза третьего издания JS, его популярность  вышла далеко за рамки Netscape (тем более, что для Netscape настали мрачные времена), поэтому его отправили в ассоциацию ECMA International (Европейская ассоциация производителей компьютеров), чтобы стандартизировать. В результате был создан стандарт ECMAScript.

Иначе говоря, ECMAScript это именно стандарт (не язык), а JavaScript — это наиболее популярная на сегодня реализация вышеупомянутого стандарта (язык). Это важно не перепутать. Помимо ОІ, в списке языков с поддержкой ECMAScript отметим JScript, ActionScript, JScript .NET и QtScript. Это так называемые диалекты или дочерние языки.

На сегодняшний день ECMAScript обладает уймой возможностей. К примеру, там есть 15 видов дополнений — блоки, объявление переменных, условия, выражения и так далее. Есть даже пустые инструкции. Подробнее — в мануалах к стандарту.

2. Что такое ES? Кратко история версий ES

Не пугайтесь. ES — это обычное сокращение для ECMAScript для нумерации его версий. То есть, те самые ES6, ES8, ES2019 и прочие — это просто номера версий. Первая — ES1 — появилась в далёком 1997 году. На сегодняшний день почти все остальные версии ES представляют собой разве что академический и исторический интерес.

Для прикладного применения имеет смысл использовать только последние версии. Это, к примеру, ES2021 или ES12.

Но вернемся к истории. Как уже сказано выше, в 1997 году появилась первая версия ECMAScript, а первый прототип JavaScript написали в 1995 году всего за 10 дней. Рабочая версия появилась в декабре того же года в Netscape Navigator 2.

А уже в следующем году Microsoft провела цикл обратной разработки JavaScript и создала JScript — свою версию языка для Internet Explorer 3.

Примечательно, что JScript был почти идентичен JavaScript, даже на уровне многих ошибок. Однако он использовал некоторые особенности IE3. После этого стало ясно, что без стандартизации возникнет настоящий «зоопарк» языков, да еще и без обратной (и прямой тоже) совместимости. К слову, поначалу так и было. Существовала отдельно версия JavaScript для браузеров Netscape, отдельная — для Internet Explorer (и несколько других для всех остальных).

В результате возникла необходимость обеспечить такую совместимость с JavaScript. Тогда Netscape и Sun Microsystems обратились к Европейской ассоциации производителей компьютеров, чтобы та приняла стандарты. Она и создала ECMAScript. Новое название было взято, чтобы не возникло недопонимания и путаницы с Java от Sun Microsystems.

В итоге ECMAScript используется теперь для обозначения спецификации или стандарта, а JavaScript — самого языка.

Отметим, что схема именования ECMAScript тоже менялась. Первые три версии (которые были выпущены в 1997, 1998 и 1999 годах) вышли с названиями ES1, ES2 и ES3. Новая версия ожидалась в 2000-м, но релизнулась только в 2009 году. Выпуск задержали в связи с «с политическими расхождениями, которые касались запутанности языка».

ES5 же увидела свет почти десять лет спустя, в декабре 2009 года. В шестой версии снова решили перейти на ежегодные релизы, но изменили методику наименования. Теперь к коду ES добавляли год выхода, например, ES2020.

Старая схема используется, но больше теми, кто привык к этому (или теми, кому сложно перестроиться на новую нумерацию). Что создает еще большую путаницу. При этом каждая новая версия получала новые функции, расширяющие возможности языка.

К слову, интересно, что идею стандартизации подали в Microsoft, а после закрытия компании Netscape именно ее браузер долгое время был номером один на рынке. Да-да, тот самый Internet Explorer. Однако Microsoft переоценила ситуацию — после ухода Netscape с рынка в корпорации почему-то решили не слишком активно развивать JScript. Под шумок там решили воспользоваться смертью браузера-конкурента и стали активно продвигать свой альтернативный для JS язык VBScript.

Скорее всего, там думали, что доминирование на рынке будет вечным. Однако со временем на рынке появились Opera на движке Presto, Firefox, а затем и нынешний лидер — Google Chrome. Все эти проекты продолжали форсить JavaScript, игнорируя убогий самопал ввиде VBScript. А когда в Microsoft спохватились, было уже поздно. JavaScript сильно вырос в популярности, прекрасно пережив всю турбулентность рынка того времени.

С этим мы разобрались, теперь же давайте поговорим о TypeScript, еще одной вехе в развитии JS.

3. TypeScript (что это) и его поддержка стандарта ECMAScript (как и зачем)

Итак, TypeScript представляет собой язык программирования, созданный Microsoft в 2012 году. Он расширяет возможности стандартного JavaScript и используется для разработки веб-приложений. Его создатель, Андерс Хейлсберг, ранее разрабатывал Turbo Pascal, Delphi и C#.

По сути, это вторая попытка (реванш после провала с VBScript) мелкомягкого гиганта перехватить контроль над этим лакомым куском рынка.

Строго говоря, TypeScript это своеобразный «вкладыш» в JavaScript. Поскольку он компилируется в последний, то может использоваться в любом современном браузере. Такой вот интересный способ преодоления множественных несовершенств популярного JS выбрала Microsoft. Также его можно использовать с платформой Node.js для серверных сценариев.

Что касается отличий TypeScript от JavaScript, то главными здесь является возможность назначения статических типов в явном виде. Добавление типов улучшает отладку кода, проверку данных на этапе компиляции, что в целом упрощает разработку.

Помимо этого, он позволяет подключать модули и использоваться классы, как в полноценных языках с объектно-ориентированной (ООП) моделью разработки.

В числе таких возможностей отметим, например, Interface (описывает контракты между взаимодействующими сущностями, а также определяет свойства и методы для кода внутри или вне приложения), Enum (определение именованных констант), Generics (работа с разными типами данных за счет декларации классов и методов работы).

Помимо этого, в рамках TypeScript доступен контроль ошибок на уровне IDE.

Если коротко, то плюсы TypeScript по сравнению с JS таковы:

1. Строгая типизация, которая позволит определить ошибки и будет подсвечивать строку в IDE.
2. Меньше закрывающих скобок — которые })})})})}. То есть, налицо упрощение кода для чтения и правок.
3. Наличие всех новых возможностей в JS, в том числе редко используемых.
4. Компиляция в полноценный JS, который затем можно доработать и без TypeScript.
5. На этом языке написан фреймворк Angular 2. Если вы хотите его использовать, то от TypeScript никуда не денешься.
6. В целом, TypeScript банально экономит время и упрощает разработку, а время, как известно, это деньги.
7. Подводя итог, TS — попытка сделать JS максимально современным и удобным, при этом кросскомпиляция сохраняет главный плюс JS — его всеядность и распространенность.

Само собой, если вы не занимаетесь крупными проектами и не используете IDE, фреймворки и прочее, то TypeScript особо не нужен. Во всех остальных случаях в наши дни это почти обязательно.

4. Примеры ECMAScript, TypeScript vs JavaScript

В этом разделе давайте поговорим о конкретных примерах тех или иных языков, сравним их наглядно. Ранее уже было сказано, что TypeScript  —  просто экономит время и уменьшает длину кода, делая код более понятным и предсказуемым.

В качестве иллюстрации можно привести вот такой небольшой пример. Нам нужно перемножить два числа.

На JS это выглядит так:

<script>
function multiply (a, b) {
 return a*b;
}
var result = multiply(a, b);
document.write (‘The answer is – ’ + result);
</script>

А на TypeScript  — так:

function multiply (a, b) {
 return a*b;
}
var result = multiply(a, b);
console.log(‘The answer is - ’ + result);

Как видите, код стал меньше. Разумеется, в столь маленьком примере разница составляет несколько символов, однако в крупных проектах она намного существеннее.

Вот вам более крупный пример.

Разберем более сложный пример. Если нам нужно сделать традиционный Hello World, то поступаем следующим образом.

Так он выглядит на JavaScript:

<!DOCTYPE HTML>
<html>
<body>
  <p>Перед скриптом...</p>
  <script>
    alert( 'Привет, мир!' );
  </script>
  <p>...После скрипта.</p>
</body>
</html>

Суть в том, что JavaScript вставляется в HTML-код с помощью тега <script> и выполняется прямо на веб-странице. Для работы может потребоваться Node.js (если это делается на сервере) или обычный браузер, если все выполняется у клиента на машине.

А вот так выглядит аналог на TypeScript.

Для начала надо создать базовый файл index.html

        <!doctype html>
<html lang=”en»>
<head>
    <meta charset=”UTF-8”>
    <title>Learning TypeScript</title>
</head>
<body>
    <script scr=”HelloWorld.js”></script>
</body>
</html>

Затем создаем файл HelloWorld.ts и добавляем в него следующую строку:

alert(‘hello world in TypeScript!’);

После этого в командной строке запускаем преобразование файла TypeScript в JavaScript. Команда выглядит так:

tsc HelloWorld.ts

Как видите, в данном случае для новичков может быть чуть сложнее.

В целом, это и есть главный недостаток TypeScript — более высокий порог вхождения, чем у JavaScript. Иначе говоря, нельзя выучить TypeScript, не зная JavaScript (а наоборот — можно). Также отметим, что программа на TypeScript — это уже программа на JavaScript (обратное не работает).

Для сравнения, вот так наш пример выглядит в ECMAScript. Здесь это реализовано через функцию. Ее нужно определить, а затем вызвать в любом месте программы. Это дает возможность постоянно переиспользовать код.

Код выглядит так:

// Define a function:
function greeting()  {
   console.log("Hello World!");
}
// Call function.
greeting();

Вывод будет таким:

Hello World!

Как видите, ничего принципиально сложного или невозможного здесь нет.

Заключение

Итак, давайте подытожим, что же мы сегодня узнали. Для начала ECMAScript — это общее наименование стандарта для нескольких языков. JavaScript — самая известная реализация стандарта, а TypeScript — надмножество (дополнение) к JavaScript, позволяющее расширить функциональность самого языка. Само собой, что TypeScript тоже соответствует требованиям стандарта ECMAScript.

На данный момент TypeScript решает главную проблему JavaScript — отсутствие строгой (статической) типизации данных. Из-за этого в JS могут возникать различные баги, связанные как раз-таки с неверной типизацией, поскольку там она динамическая. А вот в TypeScript мало того, что можно четко указывать типы данных, так еще есть возможность и задавать свои — с помощью enum. Например, так:

//Создаём перечисление Direction, в котором находятся направления (вверх, вниз, влево, вправо и никуда)
enum Direction
{
   Up,
   Down,
   Left,
   Right,
   None
}

//Переменной d можно указать направление
let d : Direction = Direction.Up;

Это, а также другие особенности делают TypeScript прекрасным дополнением к JavaScript при разработке крупных проектов. Хотя сам процесс разработки зачастую оказывается сложнее и требует больше времени. В общем, все как обычно — TypeScript это инструмент, который хорош на своем месте, а не в качестве универсальной «палочки-выручалочки».

В заключение также хотелось бы акцентировать внимание, что эволюция довольно бурного развития JS выводит его из  стандартной роли фронтенда — рост популярности Node.js все больше делает JS привычным и на стороне бэкенда, с чем он (в своих новых редакциях) прекрасно справляется.

Дополнительно о TypeScript можно узнать в этом тематическом видео: