Колбек-функції

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

У наступному прикладі: у першому console.log ми вказуємо функцію з круглили дужками і отримуємо результат виконання функції. У другому console.log ми вказуємо функцію без круглих дужок і виводимо в консолі посилання на саму функцію. Тобто функцію можна присвоїти змінній.

function myFunc() {
  return "Hello";
}

console.log(myFunc());

console.log(myFunc);

Колбек-функція (callback function) - це функція, яка передається в іншу функцію як аргумент. Ця передана функція буде викликана або "зворотно викликана" у певному контексті або після завершення певної операції.

Функція вищого порядку (higher order function) - функція, яка приймає у якості параметрів інші функції або повертає функцію у якості результату.

Розглянемо далі приклад використання колбек функцій:

• У нас є дві функції greeting і goodbye, які приймають рядок і виводять повідомлення вітання і прощання.

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

• Тепер, щоб вивести те чи інше повідомлення достатньо викликати нашу функцію myFunc і передати в неї назву функції повідомлення (посилання на функцію) і імʼя у якості рядка.

// 1 greeting callback function
function greeting(name) {
  console.log(`Hello, ${name}!`);
}

// 2 goodbye callback function
function goodbye(name) {
  console.log(`Good Bye, ${name}!`);
}

// Higher order function
function myFunc(callback, name) {
  callback(name);
}

// Виклик функції вищого порядку і передача колбек-функції і рядка
myFunc(greeting, "Sashko"); // Hello, Sashko!
myFunc(goodbye, "Sashko"); // Good Bye, Sashko!

Ми передали посилання на функції greeting і goodbye як аргумент, тому вона буде присвоєна в параметр callback і викликана всередині функції myFunc за допомогою круглих дужок. Ім'я параметра для колбека може бути довільним, головне пам'ятати, що значенням буде функція.

Інлайн колбеки

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

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

// Higher order function
function myFunc(callback, name) {
  callback(name);
}

// Виклик функції вищого порядку і передача інлайн колбек-функції і рядка
myFunc(function (name) {
  console.log(`Hello, ${name}!`);
}, "Sashko"); // Hello, Sashko!

Декілька колбеків

У JavaScript можна передавати декілька колбек-функцій у функцію або метод як аргументи. Це може бути корисним, коли вам потрібно виконати різні операції у різних контекстах або обробити різні події одночасно.

Далі наведемо приклад перевірки доступу користувача до якогось сервісу. Імітувати дозволеність будемо за допомогою автогенератора випадкових чисел random. При виклику функції передаватимемо імʼя, а також дві колбек-функції, які оброблятимуть ситуацію в разі дозволу і відмови доступу.

Різні виклики функції будуть давати різні результати.

// Колбек дозволу доступу
function approve(name) {
  console.log(`Вітаю! Вхід для ${name} дозволено!`);
}

// Колбек заборони доступу
function reject(name) {
  console.log(`На жаль! Вхід для ${name} заборонено!`);
}

// Функція вищого порядку, приймає рядок імені і дві колбек-функції
// Перша надаватиме доступ, а друга заборонятиме доступ
function myFunc(name, good, bad) {
  // імітація перевірки доступу користувача до сервісів
  let isAllowed = Math.random() >= 0.5;
  
  // Якщо дозволено доступ, то використовуємо першу колбек функцію
  if (isAllowed) {
    good(name);
    return;
  }

  // Якщо заборонено доступ, то використовуємо другу колбек функцію
  bad(name);
}

// Виклик функції вищого порядку і передача рядка і двох колбек-функцій
myFunc("Sashko", approve, reject); // Результат задежить від того, що згенерується в isAllowed

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

Абстрагування повторення

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

Так само можна створити абстрактне повторення. Написати функцію, яка приймає колбек і виконує її вказану кількість разів.

// callback greeting function
function greeting(name) {
  console.log(`Hello, ${name}!`);
}

//  Higher order function
function multiGreeting(name, callback, number) {
  for (let i = 0; i < number; i += 1) {
    callback(name);
  }
}

multiGreeting("Alex", greeting, 6);

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

greeting("Alex");