Функция обратного вызова в JavaScript

Как разработчик JavaScript, каждый разработчик должен знать, что такое функция обратного вызова, почему она существует и каковы плюсы и минусы ее использования. В этой короткой статье я собираюсь обсудить эти вещи.

Что такое функция обратного вызова?

Функция обратного вызова — это функция, передаваемая в другую функцию в качестве аргумента, которая затем вызывается внутри внешней функции для завершения какой-либо подпрограммы или действия. — МДН

• Функции JavaScript выполняются в той последовательности, в которой они вызываются. Не в той последовательности, в которой они определены.

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

function makeUpperCase(msg) {
    console.log(msg.toUpperCase());
}

Если я собираюсь использовать эту функцию для получения некоторого вывода, мне нужно создать экземпляр функции, выполнив следующую строку кода.

makeUpperCase("hello world");

Результат будет

HELLO WORLD

Давайте создадим еще одну функцию, которая принимает 2 параметра.

1. строковое значение
2. функция

function handleName(name, callback){
  const fullName = `${name} Thiyagalingam`;
  callback(fullName);
}

Здесь параметр обратного вызова — это функция, которая вызывается внутри другой функции с именем handleName.

Давайте создадим экземпляр функции handleName, передав строковое значение и функцию, которая может принимать строковое значение.

handleName('Parathan', makeUpperCase)

Приведенный выше код выведет следующее:

PARATHAN THIYAGALINGAM

Почему?

потому что мы передаем уже созданную функцию makeUpperCase и вызываем ее внутри функции handleName, передавая переменную полного имени. Это вызовет функцию makeUpperCase, передав полное имя. Здесь функция handleName вызывается как функция высшего порядка, а функция makeUpperCase вызывается как функция обратного вызова.

Существует 2 типа функций обратного вызова:

1. Синхронная функция обратного вызова
2. Асинхронная функция обратного вызова

Синхронная функция обратного вызова

Синхронные обратные вызовы выполняются одновременно с функцией более высокого порядка, использующей обратный вызов. Синхронные обратные вызовы блокируются. Функция более высокого порядка не завершает свое выполнение до тех пор, пока не завершится выполнение обратного вызова.

Большинство нативных типов JavaScript являются синхронными. Например, методы массива, такие как map, forEach,find, filter и reduce

Асинхронная функция обратного вызова

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

setTimeout(function later() {
  console.log('Printing this after 2 seconds!');
}, 2000);
// After 2 seconds logs 'Printing this after 2 seconds!'  
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function handler() {
  console.log('Button clicked!');
});
// Logs 'Button clicked!' when the button is clicked