Стрілкові функції у

Про концепцію Стрілкові функції

Крім оголошень функцій і функціональних виразів, у JavaScript є ще один дуже стислий синтаксис для визначення функції. Такі функції називають стрілковими функціями.

У цій концепції ми зосередимося на синтаксисі, який використовують, щоб записати стрілкову функцію. Є відмінності в тому, як працює стрілкова функція, зокрема привʼязка this, і про них ітиметься в інших концепціях.

Ось порівняння оголошення функції та стрілкової функції.

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

Вище ми бачимо, що синтаксис стрілкової функції:

1. прибирає ключове слово function
2. оголошує ідентифікатор addUpTwoNumbers як const
3. додає товсту стрілку =>

Якщо тіло функції містить лише інструкцію return, як у прикладі вище, то {} і ключове слово return можна опустити.

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

В окремому випадку, коли зі стрілкової функції повертають лише обʼєкт, навколо обʼєкта потрібні дужки, щоб мати змогу опустити інструкцію return.

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

Те, чи потрібні дужки навколо параметрів, залежить від їхньої кількості.

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

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