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

Явные и неявные возвраты

Для начала может быть полезно узнать, чем не является неявный возврат. Явные возвраты сообщают функции, в которой она находится, о том, что после запуска функции нужно четко передать значение. Простой способ отличить явные возвраты — использовать оператор return внутри функции.

Давайте рассмотрим пример s, где мы явно просим функцию вернуть результат:

function addValues(num1, num2) {
   return num1 + num2
}
console.log(addValues(4, 6))
// => 10

Теперь давайте рассмотрим неявные возвраты. В отличие от своего аналога, неявный возврат не требует четкого оператора return для регистрации результата. Функция по-прежнему может выполнять свою задачу и сохранять эти данные для будущего использования с неявным возвратом, поскольку часть возврата подразумевается тайно. Вот пример вышеупомянутой функции, но написанной с неявным возвратом:

function addValues = (num1, num2) => num1 + num2

Насколько это было просто? В то время как первое объявление функции было записано в 5 строк или коде, второе объявление было сжато до 1. Но при сравнении двух мы видим совершенно другой синтаксис, особенно использование синтаксиса стрелки =>. Давайте разберемся, что это может быть…

Выражения стрелочных функций

Стрелочные функции — это компактные выражения, которые можно использовать вместо традиционных функциональных выражений.¹ С добавлением стрелочного синтаксиса нет необходимости записывать function перед объявлением функции. Сокращение со стрелкой содержит собственный набор встроенных предположений. Одним из таких предположений является неявный возврат, который позволяет вам опустить return в вашей функции. Таким образом, return становится необязательным, и можно использовать любой оператор функции.

Вы можете столкнуться с выражениями со стрелками, обычно используемыми в функциях обратного вызова…

myArr.forEach((x) => console.log(x));

… или для получения API…

fetch('http://sample.com/actors.json')
  .then(response => response.json())
  .then(data => console.log(data));

Просто помните, что с другой стороны стрелки возвращается значение. Скептически? Можешь попробовать…

Тестирование неявных возвратов

Как и многие вещи в мире JavaScript, применение console.log() — это простой способ протестировать неявный возврат. Бывают случаи, когда сложная функция может не иметь наиболее очевидного возвращаемого значения, и такая проверка может быть полезной. Попробуйте записать в консоль стрелочную функцию, чтобы увидеть ее подразумеваемое значение.

let myButton = document.selectQuery('.myButton')
myButton.addEventListener('click', event => console.log(event))
// On click of myButton, event data is returned
=> MouseEvent {isTrusted: true, screenX: 1754, screenY: 302, clientX: 266, clientY: 222, …}

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

Кто должен их использовать?

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

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

использованная литература

¹ Веб-документы MDN: выражения стрелочных функций

² Когда не следует использовать стрелочные функции