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

Існує ще один простий та короткий синтаксис для створення функцій, який часто доцільніше використовувати замість Функціонального Виразу.

Це так звані “стрілкові функції”, а виглядають вони ось так:

let func = (arg1, arg2, ..., argN) => expression;

Цей код створить функцію func з аргументами arg1..argN, що обчислює expression з правого боку (використовуючи ці аргументи) та повертає його результат.

Іншими словами, це приблизно те ж саме, що і:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Розглянемо інший приклад:

let sum = (a, b) => a + b;

/* Ця стрілкова функція — це коротша форма для:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

Як ви бачите, (a, b) => a + b означає функцію, яка приймає два аргументи a і b. Після запуску, вона виконає вираз a + b і поверне результат.

• Якщо функція має лише один аргумент, тоді дужки навколо параметрів можна опускати, що дозволить записати її ще коротше.

  Наприклад:

  let double = n => n * 2;
  // те ж саме, що і: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

• Якщо аргументів немає, то дужки порожні, але вони повинні бути:

  let sayHi = () => alert("Привіт!");
  
  sayHi();

Стрілкові функції можна використовувати тим самим способом, що й Функціональні Вирази.

Наприклад, щоб динамічно створити функцію:

let age = prompt("Скільки вам років?", 18);

let welcome = (age < 18) ?
  () => alert('Привіт') :
  () => alert("Вітання!");

welcome();

Стрілкові функції можуть спершу здатись незвичними та незручними для читання, але це швидко мине, щойно очі звикнуть до таких конструкцій.

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

Багаторядкові стрілкові функції

У попередніх прикладах ліворуч від => були аргументи, а справа — окремий вираз, що певним чином їх використовував.

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

Ось так:

let sum = (a, b) => {  // фігурна дужка починає блок багаторядкової функції
  let result = a + b;
  return result; // якщо ми використовуємо фігурні дужки, то щоб повернути результат, потрібно додати "return"
};

alert( sum(1, 2) ); // 3

Підсумки

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

1. Без фігурних дужок: (...args) => expression – права частина є виразом: функція виконує його і повертає результат. Дужки можна опускати, якщо є лише один аргумент, напр. n => n*2.
2. З фігурними дужками: (...args) => { body } – дужки дозволяють включити в функцію більше однієї інструкції, але при цьому потрібно явно вказати return, щоб щось повернути.