ES6 - Cтрелочными функциями

Как они выглядят и чем отличаются от старых обычных функций?
Давайте напишем обычную функцию getMovie, которая возвращает название и год выхода фильма.
Если мы посмотрим в браузер, у нас вывелось Averages 2018. Теперь давайте напишем эту же функцию с помощью стрелок.
Как мы видим, практически все у нас осталось без изменений. Единственное отличие, что мы убрали слово function, а теперь мы пишем вместо него стрелку с другой стороны. Код стал выглядеть лаконичнее и его проще читать.
Но мы можем упросить его этот код, сделав его однострочным.
Это можно делать, когда у вас только одна операция. Тогда можно убрать return и написать то, что будет возвращать функция без скобок.
Если же у нас была бы функция только с одним параметром, то код можно было бы упростить еще больше.
В этом случая мы убрали еще и скобки вокруг аргументов, так как они нужно только если у нас 2 и больше аргументов.
Единственный нюанс - это не забыть как будет выглядеть функция без параметров.
Круглые скобки должны быть обязательно.
Это не единственные плюсы стрелочных функций. Они также не имеют своего контекста. В ес5 мы часто писали вот такой код.
Здесь у нас есть класс API, написанный на прототипах и в методе get мы хотим вернуть map функцию, внутри которой нам нужен this.url. This там будет неправильный. В нашем случае он undefined, так как мы используем webpack, который не дает нам доступа к window, а если вы выполните этот код напрямую в браузере например, то this будет window.
Для того, чтобы this был правильный обычно либо писали .bind(this)
либо создавали локальную переменную
И тот и другой варианты уменьшают читаемость и забывая так делать, вы получаете баги.
Используя стрелочные функции у вас такой проблемы не будет, так как они не имеют контекста. То есть у них будет внутри такой же контекcт, как и до захода в функцию. Давайте изменим map на стрелочную функцию
Как мы видим, все работает как и до этого, но код стал лаконичнее.
Еще одна вещь, которую убрали в стрелочных функциях кроме this, это arguments. В обычных функциях мы можем вывести arguments и посмотреть, чему равны наши аргументы.
В ES6 это можно сделать с помощью оператора spread. Как аргумент функции он возвращает все оставшиеся аргументы. Если он указан один, то он вернет все аргументы, как раньше возвращала arguments. Выглядит это так
О нем мы поговорим подробнее в следующих статьях.
Мы с вами познакомились с стрелочными функциями, узнали чем они лучше функций из ES5 и увидели насколько чище и лаконичнее получается код.

Если у вас возникли какие-то вопросы, пишите их в наш телеграмм-чат.