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

Стрілкові функції (arrow functions) - це новий синтаксис для оголошення функцій в JavaScript, який був доданий у стандарті ECMAScript 6 (ES6). Вони забезпечують більш короткий та зручний синтаксис порівняно зі звичайними функціями. Стрілкові функції зручно використовувати як колбек.

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

// classic function
function classicLove(name1, name2) {
  console.log(`${name1} + ${name2} = Love`);
}

classicLove("Alex", "Jenifer"); // Alex + Jenifer = Love

// arrow function
const arrowLove = (name1, name2) => {
  console.log(`${name1} + ${name2} = Love`);
};

arrowLove("Mathew", "Helga"); //Mathew + Helga = Love

Основи синтаксису

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

// Загальний запис стрілкової функції
(parameters) => {functionBody}

Оскількі стрілкові функції - це функціональні вирвази, то за потреби їх можна присвоїти змінній.

// Функціональний вираз стрілкової функції
const functionName = (parameters) => {functionBody}

Якщо у функції кілька параметрів, то їх перераховують через кому в круглих дужках.

// Cтрілкова функція з кількома параметрами
const functionName = (param1, param2, param3) => {functionBody}

Якщо параметр один, його можна оголошувати без круглих дужок.

// Cтрілкова функція з одним параметром
const functionName = param => {functionBody}

Якщо параметрів немає, то обовʼязково лишати порожні круглі дужки.

// Cтрілкова функція без параметрів
const functionName = () => {functionBody}

Явне і неявне повернення

У стрілкової функції після символу стрілки => розташоване її тіло. Тіло функції можна записати в фігурних дужках, а можна і без них.

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

// Cтрілкова функція з явним поверненням
const summ = (param1, param2) => { 
  console.log(`Arguments: ${param1} і ${param2}`);
  return param1 + param2;
};

Якщо фігурних дужок немає, то це називають неявним поверненням (implicit return). В такому разі повертається результат виразу, який стоїть після стрілки =>.

// Cтрілкова функція з неявним поверненням
const summ = (param1, param2) => param1 + param2;

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

Псевдомасив arguments​

На відміну від класичних функцій, стрілочні не мають локальної змінної arguments, яка містить усі аргументи. Щоб зібрати всі аргументи використвують операцію ... rest.

const colors = (...args) => {
  console.log(args);
};

colors("red", "blue", "green", "orange"); // ['red', 'blue', 'green', 'orange']

Стрілкові функції як колбеки

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

const array = [1, 2, 3, 4, 5];

// Звичайна функція-колбек
array.forEach(function (el) {
  console.log(el);
});

// Стрілкова функція-колбек
array.forEach((el) => {
  console.log(el);
});

Стрілкову функцію можна присвоїти змінній.

const array = [1, 2, 3, 4, 5];

const logMsg = (el) => {
  console.log(el);
};

array.forEach(logMsg);