Вот шпаргалка, которая покажет вам множество способов написания ваших стрелочных функций.
// 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
- Первоначально опубликовано на www.samanthaming.com
Спасибо за чтение ❤
Сказать привет! Instagram | Facebook | Твиттер | SamanthaMing.com | Блог