Стрелочные функции JavaScript для начинающих

Перевод статьи Tassia "JavaScript arrow functions for beginners".

Примечание переводчика: Так как автором оригинальной статьи является девушка, то все личные местоимения в статье - женского рода. Посчитал нужным упомянуть это, дабы не вгонять читателей в когнитивный диссонанс и не наводить на мысли о моей расшатанной гендерной самоидентификации )

Недавно я начала погружение в новые возможности ECMASCRIPT6 и хотела бы поделиться с вами одной из самых любимых на данный момент. Стрелочные функции, похоже - самое популярное нововведение, и не зря. Они предоставляют краткий способ написания функции в JavaScript, в то же время упрощая облать видимости функции. Не говоря уже о том, что во всех современных языках присутствует этот синтаксис; в Java и C# они называются лямбда-выражениями и ведут себя очень похожим образом.

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

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

Разбираемся

Стрелочные функции используют новый оператор, =>, стрелку. Этот оператор позволяет нам опустить использование фигурных скобок {} (в некоторых случаях), а также ключевых слов function и return. Давайте взглянем на массив имен, который мы хотим обойти и получить длину каждого элемента.

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

А теперь, шаг за шагом, превратим все это в стрелочную функцию. Во-первых - уберем ключевое слово function. А поскольку у нас лишь один параметр - нет необходимости использовать вокруг параметра скобки.

Мы заменили ключевое слово function и скобки вокруг аргумента на толстую стрелку =>. Но можно сделать код еще чище. Для начала уберем ключевое слово return. В нашей функции лишь одно выражение (одна строка кода, выполняющая одно действие). Зная это мы можем убрать и фигурные скобки. Их необходимо использовать только если в вашей функции более одного выражения:

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

Что стоит запомнить

В примере выше у нашей стрелочной функции был лишь один параметр, но если параметров нет совсем или наоборот, более одного - следует использовать скобки:

Некоторые ограничения

До появления стрелочных функций контекст this определялся внутри функции. Теперь this определяется лексическим контекстом, а не самой функцией, что лучше соответствует паттернам дизайна ООП. Это делает контекст this менее запутанным. Значение this не может быть изменено внутри функции. Если вам нужно привязаться к другому значению (как при использовании методов call() и bind()), то вместо стрелочной функции следует использовать функциональное выражение.

Стрелочные функции также не могут быть использованы как конструкторы. Если вы попробуете использовать ключевое слово new - вы получите ошибку. Вместо этого следует использовать классы ES6.

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

Итак, когда же мне следует использовать стрелочные функции?

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

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

Пишите код, не останавливайтесь!

Надеюсь, что эта статья стала хорошим введением в стрелочные функции. Конечно же еще очень многое о них осталось за рамками этой статьи, поэтому я надеюсь, что вы продолжите изучать их, если хотите стать экспертами в ES6! Удачного кодинга 🙂