Функції зворотного виклику у

Про концепцію Функції зворотного виклику

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

const sideLength = 5;

// Caller function takes a callback function
function applySideLength(callback) {
  return callback(sideLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(side) {
  return side * side;
}

applySideLength(areaOfSquare); // => 25

Функції зворотного виклику можна також записати як функціональний вираз:

applySideLength(function squarePerimeter(side) {
  return side * 4;
});

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

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

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

Конкретні приклади функцій зворотного виклику

Обробники подій

Обробники подій - поширений випадок застосування функцій зворотного виклику в JavaScript. Події браузера, як-от 'onload' чи 'onclick', є сигналами, які можуть запускати виклик функцій. Метод addEventListener обʼєкта DOM [Обʼєктна модель документа реєструє функцію зворотного виклику, яку буде викликано, коли він «почує», що сталася подія.

document.addEventListener('onload', function () {
  alert('The webpage has now been loaded');
});

Конвенція Node.js

У Node.js функції зворотного виклику дотримуються конвенції, щоб керувати потоком виконання програми. Вони працюють за таким шаблоном: перший аргумент функції зворотного виклику може отримати Error або null; другий і наступні аргументи отримують дані, які функція, що викликає, призначена надіслати.

Якщо стається помилка, другого та наступних аргументів може не бути, тож не можна розраховувати на їхню наявність.

function operation(a, b, callback) {
  // Work ...

  if (/* an error occurs */) {
    return callback(new Error('An error occurred'))
  }

  // On success:
  callback(null, data)
}

function callback(error, returnedData) {
  if (error) {
    // An error occurred, handle it here.
    return
  }

  // No error occurred, continue with the returned data.
}

operation(1, 2, callback)

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

Функції зворотного виклику під маскою

Поширені функції Array використовують функції зворотного виклику, щоб визначити свою поведінку:

• Array.prototype.forEach:

  • Приймає функцію зворотного виклику й застосовує її до кожного елемента масиву.

    [1, 2, 3].forEach(function (element) {
      doSomething(element);
    });
    // => doSomething() is invoked 3 times, once with each element
    

• Array.prototype.map

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

    [1, 2, 3].map(function (element) {
      return element + 1;
    });
    // => [2, 3, 4]
    

• Array.prototype.reduce

  • Приймає функцію зворотного виклику й застосовує її до кожного елемента масиву, передаючи результат далі до наступного виклику.

    [1, 2, 3].reduce(function (runningSum, element) {
      return runningSum + element;
    }, 0);
    // => 6