Как работает callback?

Callbacks: основа асинхронного программирования в JavaScript

Callback функции — это одна из фундаментальных концепций JavaScript, которая лежит в основе асинхронного программирования. Это функция, которая передаётся как аргумент другой функции и вызывается позже.

Базовый механизм

function greet(name, callback) {
  console.log(`Hello, ${name}`);
  callback();
}

function sayGoodbye() {
  console.log(Goodbye!);
}

greet(Alice, sayGoodbye);
// Hello, Alice
// Goodbye!

greet(Bob, () => {
  console.log(See you later!);
});

Асинхронные операции с callbacks

Callbacks часто используются для обработки асинхронных операций:

function fetchUserData(userId, onSuccess, onError) {
  setTimeout(() => {
    if (userId > 0) {
      const user = { id: userId, name: John, email: john@example.com };
      onSuccess(user);
    } else {
      onError(Invalid user ID);
    }
  }, 1000);
}

fetchUserData(1,
  (user) => console.log(User loaded:, user),
  (error) => console.error(Error:, error)
);

Event listeners — частый случай callbacks

Event listener это тоже callback. Обработчики событий в браузере работают через callbacks.

const button = document.getElementById(submit-btn);

button.addEventListener(click, (event) => {
  console.log(Button clicked!);
});

button.addEventListener(mouseenter, () => {
  button.style.backgroundColor = blue;
});

Pyramid of Doom (Callback Hell)

Проблема при вложении большого количества callbacks:

// Плохо: слишком много вложений
fetchUser(userId, (user) => {
  fetchPosts(user.id, (posts) => {
    fetchComments(posts[0].id, (comments) => {
      fetchReplies(comments[0].id, (replies) => {
        console.log(replies);
      });
    });
  });
});

// Хорошо: используем async/await
async function processDataBetter() {
  try {
    const user = await fetchUserAsync(userId);
    const posts = await fetchPostsAsync(user.id);
    const comments = await fetchCommentsAsync(posts[0].id);
    const replies = await fetchRepliesAsync(comments[0].id);
    console.log(replies);
  } catch (error) {
    console.error(Error:, error);
  }
}

Callbacks в практических применениях

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

const squared = numbers.map((num) => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // [2, 4]

const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

setTimeout(() => {
  console.log(This runs after 2 seconds);
}, 2000);

Custom callbacks с типизацией

В TypeScript можно определить типы callback функций для большей безопасности и документирования.

Callbacks — это мощная концепция, но для сложных асинхронных потоков лучше использовать Promises или async/await, которые обеспечивают более читаемый код.