Что значит javascript es6

ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript

Авторизуйтесь

ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript

Изучение JavaScript может сбить с толку по множеству причин, и одна из них — акронимы. Чтобы не дать сокращениям сбить вас с толку, в этой статье мы разберём их значения и историю возникновения.

Что такое ECMAScript?

Сначала немного истории. JavaScript создавался как скриптовый язык для Netscape. После чего он был отправлен в ECMA International для стандартизации (ECMA — это ассоциация, деятельность которой посвящена стандартизации информационных и коммуникационных технологий). Это привело к появлению нового языкового стандарта, известного как ECMAScript.

Последующие версии JavaScript уже были основаны на стандарте ECMAScript. Проще говоря, ECMAScript — стандарт, а JavaScript — самая популярная реализация этого стандарта.

Что такое ES? История версий

ES — это просто сокращение для ECMAScript. Каждое издание ECMAScript получает аббревиатуру ES с последующим его номером. Всего существует 8 версий ECMAScript. ES1 была выпущена в июне 1997 года, ES2 — в июне 1998 года, ES3 — в декабре 1999 года, а версия ES4 — так и не была принята. Не будем углубляться в эти версии, так как они морально устарели, а рассмотрим только последние четыре.

ES5 был выпущен в декабре 2009 года, спустя 10 лет после выхода третьего издания. Среди изменений можно отметить:

• поддержку строгого режима (strict mode);
• аксессоры getters и setters ;
• возможность использовать зарезервированные слова в качестве ключей свойств и ставить запятые в конце массива;
• многострочные строковые литералы;
• новую функциональность в стандартной библиотеке;
• поддержку JSON.

Версия ES6/ES2015 вышла в июне 2015 года. Это также принесло некую путаницу в связи с названием пакета, ведь ES6 и ES2015 — это одно и то же. С выходом этого пакета обновлений комитет принял решение перейти к ежегодным обновлениям. Поэтому издание было переименовано в ES2015, чтобы отражать год релиза. Последующие версии также называются в соответствии с годом их выпуска. В этом обновлении были сделаны следующие изменения:

• добавлено деструктурирующее присваивание;
• добавлены стрелочные функции;
• в шаблонных строках можно объявлять строки с помощью ` (обратных кавычек). Шаблонные строки могут быть многострочными, также могут интерполироваться;
• let и const — альтернативы var для объявления переменных. Добавлена «временная мертвая зона»;
• итератор и протокол итерации теперь определяют способ перебора любого объекта, а не только массивов. Symbol используется для присвоения итератора к любому объекту;
• добавлены функции-генераторы. Они используют yield для создания последовательности элементов. Функции-генераторы могут использовать yield* для делегирования в другую функцию генератора, кроме этого они могут возвращать объект генератора, который реализует оба протокола;
• добавлены промисы.

ОТР , любой , От 70 000 до 160 000 ₽

ES2016 (ES7) вышла в июне 2016 года. Среди изменений в этой версии ECMAScript можно отметить:

• оператор возведения в степень ** ;
• метод Array.prototype.includes , который проверяет, содержится ли переданный аргумент в массиве.

Спустя еще год выходит версия ES2017 (ES8). Данный стандарт получил следующие изменения:

Источник

ES5 ES6 и т.д. что это все за ху**я?

Читая статьи про Javascript новички (да и я собственно) часто сталкиваются c аббревиатурами такими как эти:

• ES3
• ES5
• ES6
• ES7
• ES8
• ES2015
• ES2016
• ES2017
• ECMAScript 2017
• ECMAScript 2016
• ECMAScript 2015

Что это все значит?

Все это относится к описанию стандарта, который называется ECMAScript По сути, ECMAScript — это стандарт на котором базируется язык JavaScript, и часто для сокращения его обозначают как ES.

История стандартизации JavaScript

Дело в том что JavaScript был выпущен в компании NetScape Navigator в 1995 году, но его изначальное название было другим — LiveScript. Лишь через год, в попытках придать ему больший охват и популярность его переименовали в JavaScript, пытаясь сыграть на популярном в то время языке Java.

в 1996 году NetScape попросил ECMA International стандартизировать JavaScript. Это привело к появлению официального стандарта ECMAScript.

С тех самых пор термин JavaScript применяется в контексте упоминания самого языка программирования, а ECMAScript — когда говорят о стандарте языка или версии этого стандарта.

До начала 21 века было выпущено 3 версии стандарта ECMAScript и затем на целое десятилетие все затихло…

ECMAScript 3 стала наиболее популярной версией JavaScript и именно ее традиционно использовали веб-разработчики по всему миру при создании сайтов.

Для разработчиков браузеров стандарт ECMAScript по сути является руководством: какие функции и конструкции языка должны поддерживаться и выполняться браузером

За десять лет после выхода третей версии стандарта была неудачная попытка выпуска 4 версии, и лишь в 2009 году комитет смог родить ECMAScript 5 — стандарт, который предусматривал новые/современные возможности JavaScript… Но браузеры не особо быстро отреагировали, а значительная доля пользователей браузера от MicroSoft — Internet Explorer тормозило внедрение и использование новых стандартов языка.

Новый JavaScript

Все стало меняться в 2012 году, разработчики стали в большинстве своем отказываться поддерживать Internet Explorer и писать код с учетом последних стандартов.

Одновременно, ECMA International подхватила активность, пересмотрев свой подход к стандартизации языка.

В результате в 2015 году был «рожден» новый стандарт получивший сокращенное название ES и согласно исторической последовательности версии присвоили 6 — в итоге получилось ES6.

Новые возможности ES6

Также значительным прорывом стало то что комитет принял решение о ежегодном пересмотре и выпуске стандарта, в результате начиная с 2015 года мы каждый год получаем новый стандарт ECMAScript.

Для лучшего понимая исторической последовательности развития JavaScript и его стандартов смотрите табличку ниже:

Даты релиза различных версий Javascript

Издание	Официальное название	Дата публикации
ES8	ES2017	июнь 2017
ES7	ES2016	июнь 2016
ES6	ES2015	июнь 2015
ES5.1	ES5.1	июнь 2011
ES5	ES5	декабрь 2009
ES4	ES4	отменен
ES3	ES3	декабрь 1999
ES2	ES2	июнь 1998
ES1	ES1	июнь 1997

На сегодняшний день наибольшей поддержкой в браузерах обладает версия ES6 (ECMAScript 2015) однако наличие современного инструментария для разработки (транспайлеры JS) позволяет разработчикам писать код на той версии которая им больше подходит.

Как определить поддержку стандартов браузерами

C выход ES6 и последующих версий, остро встал вопрос, а будет ли новый стандарт и сами новые возможности языка работать в браузере, ведь они должны поддерживаться браузером, чтобы написанный нами современный код на JavaScript отработал в нем.

На момент выхода стандарта естественно что браузеры не поспевали за ним, но на сегодняшний день все обстоит намного лучше, ну кроме конечно Internet Explore =(

Для того чтобы понять насколько браузеры поддерживают возможности например ES6 достаточно зайти на сайт и посмотреть http://kangax.github.io/compat-table/es6/

Как не сложно заметить, на сегодня ES6 достаточно хорошо уже адаптирован браузерами и широко ими поддерживается, однако разработчику уже во всю используют не только ES6 но и ES7 и в принципе любят юзать те возможности которые выкатываются со стандартами…

Но чтобы код работал в любом браузере в независимости от стандарта его написания на заре появления ES6 возник Babel, без которого по сути сейчас не обходится работа любого frontend-разработчика.

Что такое Babel и зачем он?

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

Казалось бы, ES6 уже поддерживается большинством браузеров в 2020 году, кому еще нужен Babel? Но в текущее время современный код с асинхронностью и прочим уже вышел за рамки ES6 и использует более новые версии стандарта. Плюс с приходом JS фреймворков и их активным внедрением, для их понимания браузером (например того же React) Babel стал необходим еще больше, т.к. напрямую код React в браузере не отработает, ввиду чего его нужно преобразовать при помощи Babel.

Ну и кто более глубже хочет погрузится в понимание современного JS может посмотреть видео ниже:

Источник

JavaScript ES6: пишем меньше — делаем больше

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

Ключевые слова const и let

В ES6 появилось новое ключевое слово const , которое используется для объявления так называемых иммутабельных переменных, или просто констант. Такие переменные отличаются от тех, что объявляют с помощью ключевого слова var , так как их, после инициализации, нельзя изменить. Надо отметить, что речь здесь идёт только о значении самой константы, а в том случае, если она, например, является объектом, внутреннюю структуру такого объекта поменять можно.

Использование ключевого слова const весьма полезно для работы с селекторами. Например, если у нас имеется некая кнопка, вызывающая событие, с которой надо работать в коде, или какой-то другой HTML-элемент, для обращения к ним из JS лучше всего воспользоваться const , а не var в том случае, если селектор менять не планируется.

В вышеприведённом примере значение, записанное в константу, изменить нельзя. При попытке записи в неё нового значения мы столкнёмся с сообщением об ошибке.

Говоря о ключевом слове const надо отметить, что иммутабельные переменные, объявленные с его помощью, имеют блочную область видимости. То же самое можно сказать и об обычных переменных, объявленных с помощью нового ключевого слова let . Такие переменные можно переназначать, как и объявленные с помощью ключевого слова var , но для var характерно такое явление, как поднятие переменных, в то время как то, что объявлено с помощью let и const , до объявления, не существует. То есть, например, обратиться к переменной, объявленной с помощью let , можно только после её объявления.

Стрелочные функции

Стрелочные функции — просто замечательная возможность. Они улучшают читаемость и благотворно влияют на структуру кода, да и попросту делают программы выглядящими современнее. Вот как пользуются функциями в ES5.

А вот — современный вариант.

Обратите внимание на то, что благодаря новому синтаксису можно отказаться от использования фигурных скобок и ключевого слова return . Новый код удобнее читать, выглядит он чище.

Кроме того, стрелочные функции можно использовать со встроенными функциями map , filter и reduce .

Код функции map , которой передаётся стрелочная функция, выглядит более чистым и читабельным, чем аналогичный код, созданный средствами ES5. То же самое справедливо и для функций filter и reduce . Код получается короче, с ним удобнее работать.

Шаблонные литералы

Шаблонные литералы, или шаблонные строки — возможность очень интересная. Теперь не нужно использовать оператор + для конкатенации строк, или в тех случаях, когда при сборке строк используются переменные. Вот как это выглядело раньше.

Вот что у нас есть теперь.

По-новому получается гораздо проще. Перед нами — весьма значительное отличие между старым синтаксисом и ES6. Новые возможности ES6 делают работу со строками более организованной и способствуют улучшению структуры соответствующих фрагментов кода.

Параметры функций, задаваемые по умолчанию

Автор материала говорит, что когда он пишет на PHP, он обычно пользуется параметрами функций, задаваемыми по умолчанию. Это позволяет заблаговременно задавать некоторые параметры функций. В результате, если не указать параметр при вызове функции, он не окажется равным undefined , вместо этого будет использовано его значение, заданное по умолчанию.

Рассмотрим пример, в котором параметры, задаваемые по умолчанию, не используются.

Как видно, в выводе функции появляется undefined , так как мы забыли передать функции параметр age . Однако, при использовании параметров, задаваемых по умолчанию, в выводе, формируемом функцией, undefined не появится.

Как видите, функция возвращает строку без undefined -значений даже в том случае, когда второй параметр при её вызове не передан. Использование параметров, задаваемых по умолчанию, позволяет предусмотреть ситуации нестандартного вызова функций.

Деструктурирование массивов и объектов

Деструктурирование упрощает операцию присвоения отдельных значений, хранящихся в массивах или объектах, новым переменным. Вот как подобное можно было сделать раньше.

Вот как то же самое делается средствами ES6.

Пользуясь ES5, мы должны были присваивать каждое отдельно взятое значение каждой переменной. Благодаря возможностям ES6 для того, чтобы извлечь отдельные значения объекта, имена переменных достаточно поместить в фигурные скобки.

Обратите внимание на то, что если в подобной конструкции с фигурными скобками встретятся имена переменных, которым нет соответствий среди имён свойств объекта, они примут значение undefined . Например, если имя свойства объекта — name , и мы сделаем попытку присвоить значение этого свойства переменной username , ничего не получится, эта переменная получит значение undefined . Переменные всегда надо именовать так же, как свойства объекта. Если же требуется использовать переменную с другим именем, нужно использовать конструкцию, в которой сначала идёт имя переменной, соответствующее имени свойства объекта, потом — двоеточие, и, наконец — новое имя переменной. Выглядит это так.

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

Инструкции import и export

Использование инструкций import и export в JS-приложениях расширяет их возможности. Они позволяют программисту создавать самостоятельные компоненты, подходящие для повторного использования.

Если вы знакомы с любым MVC-фреймворком для JavaScript, вы уже знаете, что они практически всегда используют инструкции import и export для работы с компонентами. Как же всё это устроено? На самом деле — очень просто. Инструкция export позволяет экспортировать модуль, который может быть использован в других JavaScript-компонентах. Инструкция import используется для импорта подобных модулей.

Предположим, у нас есть пара файлов — detailComponent.js и homeComponent.js .

В файле detailComponent.js мы хотим экспортировать функцию detail . Вот как это сделать.

Теперь, если нам нужно использовать эту функцию в homeComponent.js , в этом нам поможет инструкция import .

Если нужно импортировать несколько модулей, их можно перечислить в фигурных скобках.

Промисы

Промисы — это одна из новых возможностей ES6. Это — подход к написанию асинхронного кода. Его можно использовать когда, например, нужно загрузить данные из некоего API, или когда у нас имеется функция, на выполнение которой нужно некоторое время. Промисы упрощают решение подобных задач. Вот как с ними работать.

Здесь показано, что попадёт в консоль при попытке логирования промиса.

Если нужно выполнить какую-то функцию после того, как, например, получены данные, на загрузку которых требуется время, мы можем воспользоваться промисом. Промис принимает два параметра — resolve и reject . Первый используется при успешном разрешении промиса, второй — для обработки ожидаемых ошибок. В следующем примере обратите внимание на то, что функция fetch сама возвращает промис.

В данном случае вызов console.log приводит к выводу в консоль массива.

Синтаксис оставшихся параметров и оператор расширения

Синтаксис оставшихся параметров используется для представления неограниченного множества аргументов в виде массива. Вот несколько примеров его использования.

Оператор расширения похож на использование синтаксиса оставшихся параметров, но он позволяет, как показано в следующем примере, работать с массивами, извлекая их значения, которые иначе пришлось бы извлекать, пользуясь циклом for или какими-то другими методами.

Классы

Классы — это одно из базовых понятий объектно-ориентированного программирования. Они позволяют улучшить структуру кода и сделать его безопаснее.

Для того чтобы объявить класс, можно воспользоваться ключевым словом class , за которым следует имя класса с парой фигурных скобок.

Теперь на основе класса можно создать новый объект, воспользовавшись ключевым словом new .

Классы поддерживают механизм наследования. Для его использования служит ключевое слово extends , после которого указывают имя класса, от которого хотят наследоваться.

Здесь можно почитать подробности о классах в JavaScript.

Итоги

Надеемся, этот материал помог вам открыть среди возможностей ES6 что-то новое, полезное в вашей практической работе. Кстати, здесь описаны далеко не все новшества ES6. Ознакомиться с гораздо более обширным их списком можно здесь. Кроме того, если вас интересует тема новых возможностей JavaScript, вот, вот и вот — некоторые наши публикации на эту тему.

Уважаемые читатели! Можете ли вы привести примеры из практики, иллюстрирующие идею, в соответствии с которой применение новых возможностей ES6 позволяет решать те же задачи, что и раньше, с помощью меньшего объёма кода, который, к тому же, оказывается проще, понятнее и читабельнее?

Источник