ES6 был выпущен в июне 2015 года. С ним появилось много новых функций, таких как стрелочные функции, let и const, промисы, модули и классы. Их гораздо больше, но, согласно опросу, проведенному 2ality.com, они являются наиболее распространенными. Все эти вещи технически существовали в Javascript до того, как был реализован ES6, но новый выпуск упростил их написание и чтение, что-то, называемое «синтаксическим сахаром». Эта статья будет в основном посвящена стрелочным функциям, но мы также коснемся разницы между const и let и того, почему var была отброшена на второй план.

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

Чистые возможности стрелочных функций — очень распространенная повторяющаяся тема во всех языках программирования. Я начал свое путешествие с Ruby, поэтому мне легко увидеть сходство между ним и блоками, другие могут распознать то же самое с лямбда-функциями в Python, Java или C++. Основные преимущества заключаются в более коротком синтаксисе и отсутствии привязки «этого».

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

Привязка «этого»

Ранее в статье мы говорили об одном из преимуществ стрелочных функций, заключающемся в том, что «это» не привязано. До ES6 все функции имели свой собственный контекст выполнения. В практическом смысле это означает, что как аргументы, как показано выше, так и формы this наследуются от их родительской функции.

Использование стрелочных функций для управления наборами данных

Стрелочные функции полезны множеством способов, но, пожалуй, наиболее очевидным из них является использование таких методов, как map, filter, where, find и forEach. Они вступают в игру при манипулировании наборами данных, в частности массивами. Ниже у нас есть метод forEach, вызываемый для значений с несколькими параметрами, передаваемыми из родительского объекта.

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

Постоянные/пустые переменные

Теперь, когда мы рассмотрели синтаксическую разницу между функциями ES5 и стрелочными функциями, давайте углубимся в новые переменные, появившиеся в ES6. Раньше var, глобально или функционально ограниченный, был единственным доступным объявлением переменной в Javascript. Мы не будем тратить много времени на var, потому что он угасает в мире обесценивания. Хотя переменная var по-прежнему доступна в ES6, сейчас рекомендуется использовать либо const, либо let. Я объясню, что добавление этих объявлений переменных делает наш код более интуитивным.

Позволять

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

Мы используем let вместо const, когда знаем, что переменная будет изменена или, по крайней мере, может быть изменена в какой-то момент нашего кода. Противоположное верно для константных объявлений переменных, наряду с парой других правил.

Постоянная

Константные переменные, явно сокращенные от константы, также имеют блочную область видимости и не могут быть ни обновлены, ни повторно объявлены. После того, как они будут вызваны, они будут хранить одно и то же значение на протяжении всего блока. Итак, в приведенном выше примере с let мы могли бы изменить значение переменной, здесь мы видим, что мы не можем обновить или повторно объявить ее.

Подъем

Объявления переменных const и let поднимаются наверх своей области видимости перед фазой выполнения. Здесь кроется еще одно отличие переменных ES5 и ES6. С помощью let/const переменные не инициализируются, когда начинается фаза выполнения, тогда как объявленные переменные var инициализируются, но со значением undefined.