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

Перед этой статьей я упомянул вам, что я начну серию статей, и я создал введение и о движке JavaScript V8. Если вы потеряли то, что я сделал, проверьте это:

В этой серии статей я не буду объяснять концепцию Promises или async/await, но не беспокойтесь, я объясню это в следующей статье.

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

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

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

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

function calculator(x, y, callback) {
  return callback(x, y);
}

function add(x, y) {
  return x + y;
}

function subtract(x, y) {
  return x - y;
}

function multiply(x, y) {
  return x * y;
}

function divide(x, y) {
  return x / y;
}

console.log(calculator(10, 2, add)); // Output: 12
console.log(calculator(10, 2, subtract)); // Output: 8
console.log(calculator(10, 2, multiply)); // Output: 20
console.log(calculator(10, 2, divide)); // Output: 5

Где я могу использовать обратные вызовы?

Обратные вызовы могут использоваться в различных контекстах в JavaScript. Вот несколько распространенных примеров:

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

В приведенном ниже примере функция fetch() вызывается с аргументом URL-адреса для отправки HTTP-запроса на указанный URL-адрес и извлечения данных из него. В данном случае мы запрашиваем у API Chuck Norris Jokes получение случайной шутки.

fetch("https://api.chucknorris.io/jokes/random")
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error(`Error: ${error}`))
  .finally(() => console.log("Fetch complete!"));

Программирование, управляемое событиями. Обратные вызовы часто используются для обработки событий в веб-приложении, таких как щелчки мышью, ввод с клавиатуры или отправка форм. Когда происходит событие, выполняется обратный вызов для обработки события.

В приведенном ниже примере изобразите тег кнопки в HTML и добавит действие щелчка.

const button = document.querySelector("button");

function handleClick(event) {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);

API на основе обратных вызовов. Некоторые библиотеки и платформы JavaScript используют обратные вызовы, чтобы предоставить разработчикам простой и гибкий интерфейс для взаимодействия со своими API. Например, API файловой системы Node.js использует обратные вызовы, чтобы обеспечить простой и гибкий способ чтения и записи файлов на сервере.

В приведенном ниже примере определите функцию sayHello, которая возвращает строку «Hello World!». Я использовал функцию setTimeout, чтобы запланировать вызов функции sayHello после задержки в 1000 миллисекунд (т. е. 1 секунду).

function sayHello() {
  console.log("Hello World!");
}

setTimeout(sayHello, 1000);

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

В приведенном ниже примере определите функцию sayMyName, которая принимает функцию обратного вызова в качестве параметра. Внутри функции sayMyName мы определяем переменную с именем name и присваиваем ей значение «Rodrigo». Когда вызывается функция sayHello, она записывает в журнал сообщение «Hello World Rodrigo!» к консоли.

function sayMyName(callback) {
  const name = "Rodrigo";
  callback(name);
}

function sayHello(name) {
  console.log(`Hello World ${name}!`);
}

sayMyName(sayHello); // Output: Hello World Rodrigo!

Что означает Callback Hell, также известный как Pyramid of Doom

Чрезмерное использование обратных вызовов может привести к сложному и трудночитаемому коду, поэтому важно использовать их разумно и при необходимости рассматривать альтернативные методы.

Чтобы избежать этих проблем, важно разумно использовать обратные вызовы и при необходимости рассматривать альтернативные методы. Промисы и синтаксис async/await — это новые возможности языка в JavaScript, которые могут предоставить более мощные и гибкие альтернативы обратным вызовам.

Итак, если вы хотите узнать больше о промисах и асинхронности/ожидании, ждите следующей статьи, которую я опубликую.

Спасибо за прочтение, я надеюсь, что эта статья каким-то образом пополнила вашу базу знаний об этом.