Підручник з функцій стрілки JavaScript - Як оголосити функцію JS за допомогою нового синтаксису ES6

Ви, напевно, бачили функції стрілок, написані декількома різними способами.

//example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTwo = a => { const newValue = a + 2; return newValue; }; 

Деякі мають дужки навколо параметрів, а інші - ні. Деякі використовують фігурні дужки таreturnключове слово, інші ні. Один навіть охоплює кілька рядків, тоді як інші складаються з одного рядка.

Цікаво, що коли ми викликаємо вищезазначені функції стрілок з однаковим аргументом, ми отримуємо однаковий результат.

console.log(addTwo(2)); //Result: 4 

Як ви знаєте, який синтаксис функції стрілки використовувати? Ось що розкриє ця стаття: як оголосити функцію стрілки.

Основна різниця

Функції зі стрілками - це ще один - більш стислий - спосіб написання виразів функцій. Однак вони не мають власного прив'язки до thisключового слова.

//Function expression const addNumbers = function(number1, number2) { return number1 + number2; }; //Arrow function expression const addNumbers = (number1, number2) => number1 + number2; 

Коли ми викликаємо ці функції з однаковими аргументами, ми отримуємо однаковий результат.

console.log(addNumbers(1, 2)); //Result: 3 

Існує важлива синтаксична різниця, на яку слід звернути увагу: функції стрілок використовують стрілку =>замість functionключового слова. Є й інші відмінності, про які слід пам’ятати, коли ви пишете функції зі стрілками, і це те, що ми розглянемо далі.

Круглі скобки

Деякі функції стрілок мають дужки навколо параметрів, а інші - ні.

//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2; 

Як виявляється, кількість параметрів, яку має функція зі стрілкою, визначає, чи потрібно нам включати дужки чи ні.

Для функції стрілки з нульовими параметрами потрібні дужки.

const hello = () => "hello"; console.log(hello()); //Result: "hello" 

Стрілка функція з одним параметром зовсім НЕ вимагає дужок. Іншими словами, дужки необов’язкові.

const addTwo = num => num + 2; 

Тож ми можемо додати дужки до наведеного вище прикладу, і функція стрілки все ще працює.

const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4 

Для функції стрілки з кількома параметрами потрібні дужки.

const addNums = (num1, num2) => num1 + num2; console.log(addNums(1, 2)); //Result: 3 

Функції стрілок також підтримують параметри відпочинку та деструктурування . Для обох функцій потрібні дужки.

Це приклад функції стрілки з параметром відпочинку .

const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ] 

І ось такий, який використовує деструктуризацію .

const location = { country: "Greece", city: "Athens" }; const travel = ({city}) => city; console.log(travel(location)); //Result: "Athens" 

Підсумовуючи: якщо є лише один параметр - і ви не використовуєте параметри відпочинку або деструктурування, - тоді дужки необов’язкові. В іншому випадку обов’язково включіть їх.

Тіло функції

Тепер, коли ми охопили правила дужок, звернімося до тіла функції функції зі стрілкою.

Тіло функції стрілки може мати "стисле тіло" або "тіло блоку". Тип фігури впливає на синтаксис.

По-перше, синтаксис “стислого тіла”.

const addTwo = a => a + 2; 

Синтаксис “лаконічного тіла” саме такий: він лаконічний! Ми не використовуємоreturnключові слова або фігурні дужки.

Якщо у вас функція стрілки в один рядок (як у прикладі вище), значення неявно повертається. Тож ви можете опуститиreturnключові слова та фігурні дужки.

А тепер давайте розглянемо синтаксис “block body”.

const addTwo = a => { const total = a + 2; return total; } 

Зверніть увагу, що у наведеному вище прикладі ми використовуємо як фігурні дужки, так і returnключове слово.

Зазвичай ви бачите цей синтаксис, коли тіло функції складає більше одного рядка. І це ключовий момент: оберніть тіло багаторядкової функції стрілки у фігурні дужки і використовуйтеreturnключове слово.

Об'єкти та функції стрілок

Існує ще один синтаксичний нюанс, про який слід знати: оберніть тіло функції в дужки, коли потрібно повернути об’єктний літеральний вираз.

const f = () => ({ city:"Boston" }) console.log(f().city) 

Без дужок ми отримуємо помилку.

const f = () => { city:"Boston" } //Result: error 

Якщо ви вважаєте синтаксис функції стрілки дещо заплутаним, ви не самотні. Потрібно деякий час, щоб ознайомитися з нею. Але обізнаність про ваші варіанти та вимоги - це кроки в цьому напрямку.

Я пишу про те, як навчитися програмувати та про найкращі способи цього зробити ( amymhaddad.com).