Введение в стрелочные функции (arrow functions) в JavaScript ES6

[@arusakov]

Стрелочные функции (Arrow functions) в ECMAScript 6 — и название такое же, и тема раскрыта полнее.

[@greebn9k]

Спасибо за полезную ссылку. Пригодится тем, кто ознакомится с этой статьей.

[@valemak]

Вы бы поделились с silmarilion'ом и дали ему хоть один совместный перевод от своего имени опубликовать. Хотел Вашего соавтора плюсануть на Мегамозге, а у него там нет ни одной публикации. Здесь он вообще ридонли.

[@greebn9k]

Учтем. Спасибо.

[@ghosthope]

Мне одному режет глаз фраза «Каждый раз, когда вам надо вызвать функцию, вам необходимо прописать function () {}.»?

[@greebn9k]

Поправили.

[@Areso]

«Зависит.» Это же не английский, незачем использовать прямую кальку с фразы «It depends».

[@greebn9k]

А чем плохо слово «зависит», даже если это и калька? По-моему, лаконично и все объясняет.

[@gwer]

Имплицитный возврат — насколько часто встречающийся термин? Он действительно лучше, чем тот же «неявный»?

[@greebn9k]

Похоже, что мы стали новаторами. Поправили на «неявный».

[@Sirion]

Ещё одна статья про arrow functions в ES6? Надо прочитать, тема сложная.

[@NeXTs_od]

Узнал для себя что
1) С {} неявного возврата не будет
2) Чтоб вернуть пустой объект, оборачиваем в ({})
3) У стрелочных функций нет arguments, а достать их можно через ...args
спасибо

[@dom1n1k]

Мелкие функции-однострочники приветствую, а вот за использование => в больших многострочных функциях отбивал бы руки.

[@hell0w0rd]

И что тут не так?

passport.deserializeUser((id, done) => {
  User.findOne({
    where: {id}
  }).then((user) => {
    done(null, user);
  }).catch(done);
});

[@dom1n1k]

Слово function хорошо бросается в глаза и сразу дает понять, что это самостоятельный логический кирпич кода.
А тут — фрагмент, как будто вырванный из контекста. Стрелка видна плохо, всё сливается. То ли функция, то ли длинный цепной вызов.
Для мелких коллбеков это плюс, для самостоятельных функций — минус.

[@hell0w0rd]

C подсветкой все нормально. Ни разу не было проблем, почти год уже с ES6.

[@dom1n1k]

Не нормально. И именно поэтому я не перевариваю кофескрипт, там всё ещё в разы хуже (хотя и признаю, что в нем есть некоторые интересные фишки).

[@batmandarkside]

Нормально

[@Eternalko]

Сравнения ради примерно так выглядит похожий код в CS

ST3

[@dom1n1k]

Почти полное отсутствие скобок (как круглых, так и фигурных), давая смешную экономию на количестве символов, убивает читаемость на корню. Я вынужден всматриваться в строку, чтобы для начала понять, а где тут вообще что? Работать парсером, фактически. Где ключевое слово, где имя функции, где параметр, где переменные? И даже подсветка не спасает.

[@Eternalko]

С точки зрения людей пишущих на CS отсутствие лишних символов и пустых слов (типа function) увеличивает читаемость.

[@ankh1989]

Первый раз вижу CS. Отлично читается.

[@faiwer]

Отсутствие фигурных скобок, на мой взгляд, тут только увеличивает читаемость. Как и в ruby и в python-е. Возможно просто дело привычки. А вот слабость подсветки на лицо. Действительно бедная палитра. На моих скриншотах снизу больше «светофора».

[@Eternalko]

У меня она специально выключена.

[@faiwer]

Ну это уже от подсветки зависит. У меня в st3 "=>" выделяется добротно и глаза за него цепляются не хуже, чем за function. А вот раздражает он куда меньше.

скриншот

В общем тут скорее на вкус и цвет. Отбивать руки явно не стоит.

[@dom1n1k]

В данном случае внутри map находится, фактически, однострочник, который зачем-то написали в 5 строк. Можно вполне обойтись без промежуточной переменной name, воткнув вызов getName инлайн. А ещё лучше заиметь функцию getValueById.
А я говорил про действительно полноценные функции, составляющие некий логический блок.

[@faiwer]

Я Код от балды написал. Зря вы к нему цепляетесь :) Ключевой момент, что без египетских кавычек и хорошей цветовой схеме, всё более чем наглядно.

Ещё скриншот

[@aparamonov]

Это и правда кошмарно читается — надо всматриваться где начало и конец блоков/вызовов, слишком много вложенных отступов/блоков.
Пример чуть побольше — и разработчики с ума сойдут.

const findUser = (id) => User.findOne({where: {id}})
const onSuccess = (user) => done(null, user)

passport
  .deserializeUser(findUser)
  .then(onSuccess)
  .catch(done);

[@Mithgol]

Вокруг единственного аргумента можно не ставить скобки:

const findUser = id => User.findOne({where: {id}})
const onSuccess = user => done(null, user)

[@hell0w0rd]

По кодстайлу, на пример, Airbnb, так делать запрещено. На мой взгляд вот как раз эта возможность и ее использование может ухудшить читаемость

[@everyonesdesign]

Неправда, у них сказано как раз наоборот:

If your function only takes a single argument, feel free to omit the parentheses.

[@hell0w0rd]

Хм. Время идет, люди и гады меняются. Изначально было не так: github.com/airbnb/javascript/blob/58cdc731f435db78f3c1f4d466284796128fb75b/README.md#arrow-functions
Я все еще придерживаюсь старого гайда. Они еще перешли на trailing comma в описание объекта, что мне вообще не нравится.

[@trikadin]

Наверное, люди и гайды?)

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

[@hell0w0rd]

Забавная очепятка.
Да, полностью согласен. Можно такого написать, что пару минут вчитываться прийдется.

const foo = a => b => c => a + b + c;

[@trikadin]

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

Хотя я тоже не без греха. Например, у меня в коде иногда бывают такие штуки:

const values = $C(obj).reduce((result, value) => (result.push(value), result), []);

$C, если что — это от библиотечки, которая предоставляет одинаковый набор методов для любых коллекций.

[@kana-desu]

Типичное каррирование, ИМХО оно всегда нечитабельное

[@Mithgol]

И что тут не так?

Вместо «(user)» можно просто «user» было бы записать.

(Не ошибка, но скобки лишние.)

[@hell0w0rd]

У arrow-function не просто нет this, у них нет прототипа.

[@Arilas]

При этом, даже создатели V8 заявляли, Arrow Functions инициализируются быстрее, вызов быстрее так как:
1. Не создается прототип
2. Не создается arguments
3. Не нужно регистрировать ее как функцию конструктор (нельзя через new писать)

[@hell0w0rd]

Ну это понятно. Просто все эти особенности хорошо бы учитывать.

[@SamVimes]

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

[@faiwer]

Скажите, а что такое лямбда? Описание на той же вики, не очень проясняет вопрос. Лямбда обязана быть однострочной? Если да, то стрелочные функции — не обязаны. Лямбда это просто анонимный метод, определённый прямо посреди кода? Если так, то и обычные function-ы, без явно заданного имени, получается, тоже лямбды?

[@SamVimes]

Ну, вопрос хороший, а я, к сожалению, не эксперт, но мне казалось, что в лямбде отсутствует контекст, т.е. (вроде как) используется контекст того «места», где лямбда создана. Опять таки боюсь ошибиться, но у function контекст есть.

[@faiwer]

Ну по такому критерию получается что да, это лямбды.

[@kvas]

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

Стрелочные функции — это анонимные функции, так что да, их можно называть лямбдами. Но в JavaScript'е есть ещё обычные анонимные функции, которые тоже в общем-то лямбды, несмотря на их развесистый синтаксис. Возможно поэтому тут используется более специфичный термин «стрелочные функции».