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

// Explicit Return, Multi-Line
a => {
  return a
}
// Explicit Return, Single-Line
a => { return a }
// Implicit Return, Multi-line
a => (
  a
)
// Implicit Return, Single-Line
a => a
// Multiple Parameters, Parentheses Required
(a, b) => a, b

Неявный и явный возврат

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

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

Пример A: нормальное функционирование

const sayHi = function(name) {
  return name
}

Пример B: стрелочная функция с явным возвратом

// Multi-line
const sayHi = (name) => {
  return name
}
// Single-line
const sayHi = (name) => { return name }

Пример C: функция стрелки с неявным возвратом

// Single-line
const sayHi = (name) => name
// Multi-line
const sayHi = (name) => (
  name
)

Заметили разницу? Когда вы используете фигурные скобки {}, вам необходимо явно указать возврат. Однако, когда вы не используете фигурные скобки, подразумевается return, и он вам не нужен.

На самом деле у этого есть название. Когда вы используете фигурные скобки, как в примере B, это называется телом блока. А синтаксис в примере C называется кратким телом.

⭐️ Вот правила:

  • Блокировать тело ➡️ return ключевое слово является обязательным
  • Краткое содержание ➡️ return ключевое слово подразумевается и не требуется

Скобки

В обычных функциях нам всегда приходилось использовать круглые скобки. Однако для стрелочных функций круглые скобки необязательны, если имеется ТОЛЬКО один параметр.

Скобки необязательны для ОДНОГО параметра

// Normal Function
const numbers = function(one) {}
// Arrow Function, with parentheses
const numbers = (one) => {}
// Arrow Function, without parentheses
const numbers = one => {}

Скобки обязательны для НЕСКОЛЬКИХ параметров.

// Normal Function
const numbers = function(one, two) {}
// Arrow Function, with parentheses
const numbers = (one, two) => {}

⚠️ Отсюда, как работать со стрелками: возвращение объектов

Помните, я упоминал о различных типах телосложения - лаконичном и блочном. Просто чтобы быстро обновить вас на случай, если вы пропустили этот раздел (мне немного грустно, но не обидно 😝). В теле блока используются фигурные скобки и явно указано return. В кратком тексте не используются фигурные скобки и вы пропускаете ключевое слово return. Хорошо, теперь ты догнал, давай вернемся к делу 🤯

Давайте намеренно взломаем наш код, чтобы вы могли усвоить урок, лол 😂

const me = () => { name: "samantha" };
me(); // undefined 😱

Какие?! Почему он не возвращает мой объект. Не волнуйтесь, давайте исправим это, заключив в круглые скобки.

const me = () => ({ name: "samantha" });
me(); // { name: "samantha" } ✅

⭐️ Вот правило:

  • Для краткости текста заключите литерал объекта в круглые скобки.

Ресурсы

Делиться

Спасибо за чтение ❤

Сказать привет! Instagram | Facebook | Твиттер | SamanthaMing.com | Блог