Немного о стрелочных функциях ES6

В 2к + 10 + 7 уже никого не удивишь такой страшной аббревиатурой, как “ES6”. Каждый, уважающий себя разработчик, активно использует spread-операторы, promise’ы, классы и вот это вот все.

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


Итак, как мы знаем, стрелочная функция в ES6 выглядит примерно так:

Обычная стрелочная функция

Все понятно и очевидно. Функция принимает параметры a и b, а в теле {} мы описываем саму функцию. Стильно, модно, молодежно. Короткий синтаксис, функция не имеет своего this и бла-бла-бла. В общем, бери не думай.

Но недавно, гуляя по просторам github’а, натыкаюсь я на вот такую конструкцию, которая ставит меня в тупик:

Картинка 1. Вот такую функцию я увидел.

“What’s wrong, dude?” — спросят меня ребята, передвигающиеся на гироскутере. А вот в чем:

Картинка 2. Ляяя, шо ето за скобочки???

“Не понял” — именно с такой мыслью я вновь обратился к описанию. Открываю, читаю…читаю еще раз. Вспоминаю школьную мудрость: смотрим в книгу, видим фигу.

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


Функция, описанная без круглых скобочек (картинка 1), является полным аналогом “обычной” функции:

Картинка 3. Обычная функция.

“Обычная” функция, возвращает undefined, если у неё явно не задан return (именно поэтому в консоли хром пишет undefined. А ты думал это магия??)

Картинка 4. “Обычная” функция. Не прописали return
Картинка 5. “Обычная” функция. Прописали return

Точно таким же образом будет работать и наша стрелочная функция:

Картинка 6. Стрелочная функция. Не прописали return
Картинка 7. Стрелочная функция. Прописали return.

Но для меня выяснилось следующее. Если прописать стрелочную функцию только с круглыми скобками () => (), то это будет описанием только return. То есть, вот такая запись:

Картинка 8. Прописываем return у стрелочной функции.

Полностью аналогична этой:

Картинка 9. Прописываем return у “обычно” функции.

Можно задаться вопросом — а зачем? А затем, чтобы не городить скажем вот такие конструкции:

Картинка 10. Ох нагородил, так нагородил…

Довольно часто нам нужны функции, которые просто возвращают какое-то значение. Но можно быстро смекнуть, что примитивы возвращать — дело не царское. А что тогда возвращать? Думаю, уже понятно…

Картинка 11. Нет времени объяснять. Просто верни объект

И тут все встало на свои места. Конструкция которую мы видели на картинке 2 — ни что иное, как возврат объекта. Разжуем еще более детально.

Если нам нужно просто вернуть объект, то мы не можем написать так:

Катинка 12. А я смотрю, ты хотел объект вернуть? :)

Все потому, что в данном случае скобки {} означают не объект, а составную инструкцию. И нам нужно это дело обернуть в обычные скобки (), которые являются куском кода в JS. И поэтому мы получаем следующее:

И теперь наши скобочки {} являются не составной инструкцией, а объектом, который мы и возвращаем через return. Т.е мы написали следующее:

Вот и все. Никакой магии :)

Соответственно, если попробовать написать что-то вроде:

То мы автоматически получаем посыл от интерпретатора. Но помните, что это не аналогично записи:

Потому что в “обычной” функции все что идет после “console.log(1);” будет тупо проигнорировано.

А если вам таки нужно просто вернуть примитив, то даже скобочек () не надо:


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